2023uniapp的请求封装

随着移动端应用的快速发展，前端框架也越来越多样化。其中，uniapp作为一款基于Vue.js的跨平台开发框架，在移动应用开发中得到越来越广泛的应用。

作为前端开发人员，我们在uniapp进行开发时，常常会用到很多API或者服务器接口进行数据交互。在数据请求过程中，我们需要考虑网络通信、数据格式、数据安全等问题，同时还要保证代码的可读性和可维护性。针对这些问题，我们可以将API请求进行封装，提高代码的可读性和可维护性。

下面就来介绍一下uniapp的请求封装。

一、网络请求

uniapp中发送网络请求需要用到uni.request()，该函数是一个异步函数，需要使用Promise进行封装。以下是一个简单的封装示例：

export function request(method, url, data = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url,
      data,
      header: {
        'content-type': 'application/json',
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

在该封装函数中，我们需要传入请求方法、请求URL以及请求数据。此外，该函数还定义了请求头、请求成功和请求失败的回调函数。

二、统一错误处理

封装请求的过程中，我们需要考虑请求中的错误处理。错误处理的过程中，我们可以通过对错误代码进行统一的处理，来提高代码的可维护性。以下是一个常见的错误代码处理示例：

export function request(method, url, data = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url,
      data,
      header: {
        'content-type': 'application/json',
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

在该封装函数中，我们通过判断错误代码的不同类型，定义了不同的错误提示信息。这样的处理方法可以使代码更易于维护。

三、请求的配置

对于经常使用的API接口，我们可以对请求进行更为细粒度的封装。在发送请求的过程中，我们可以定义请求的各种选项和参数，来实现更加灵活和高效的请求。

以下是一个请求配置示例：

const requestConfig = {
  baseUrl: 'https://example.com',
  timeout: 5 * 1000,
  headers: {
    'Accept-Language': 'zh-CN',
  },
};

export function request(method, url, data = {}, config = {}) {
  const {
    baseUrl = '',
    timeout = 0,
    headers = {},
  } = { ...requestConfig, ...config };

  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url: `${baseUrl}${url}`,
      data,
      header: {
        ...headers,
        'content-type': 'application/json',
      },
      timeout,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

在该封装函数中，我们定义了基础URL、请求超时时间和请求头。在调用函数时，外部传入的参数将根据需求进行合并，在请求头中增加了Accept-Language参数，实现了更为灵活的请求配置。

四、请求拦截器

在一个复杂的应用中，我们可能需要对请求进行拦截处理。例如，对于每个请求，在发送之前需要对请求头增加token验证信息等。

以下是一个请求拦截器示例：

const requestConfig = {
  baseUrl: 'https://example.com',
  timeout: 5 * 1000,
  headers: {
    'Accept-Language': 'zh-CN',
  },
};

export function request(method, url, data = {}, config = {}) {
  const {
    baseUrl = '',
    timeout = 0,
    headers = {},
  } = { ...requestConfig, ...config };

  uni.addInterceptor('request', (options) => {
    options.header['token'] = uni.getStorageSync('token');
    return options;
  });

  return new Promise((resolve, reject) => {
    uni.request({
      method,
      url: `${baseUrl}${url}`,
      data,
      header: {
        ...headers,
        'content-type': 'application/json',
      },
      timeout,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error(res.statusCode));
        }
      },
      fail: (err) => {
        let errorMessage = '';

        if (err.errMsg.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试！';
        } else if (err.errMsg.includes('abort')) {
          errorMessage = '请求数据错误，请重试！';
        } else {
          errorMessage = '网络请求错误，请检查网络连接！';
        }

        reject(new Error(errorMessage));
      },
    });
  });
}

在该封装函数中，我们使用了uni.addInterceptor()函数，在请求中增加了token验证信息。这样的封装方法可以实现对每个请求的统一管理处理。

总结

身为一个前端开发人员，代码的可读性和可维护性一直都是个不可或缺的问题。在uniapp中，我们应当靠封装API请求来实现这个目标，尽可能地提高代码的重用性和代码的可读性。同时，在封装请求中，我们根据每个项目的实际需要来优化封装方法，以实现更高效的请求操作。

以上就是uniapp的请求封装的详细内容，更多请关注zzsucai.com其它相关文章！