uniapp的请求封装

百变鹏仔 4周前 (11-20) #uniapp

文章标签 uniapp

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

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

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

一、网络请求

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

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

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

二、统一错误处理

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

export function request(method, url, data = {}) {  return new Promise((resolve, reject) =&gt; {    uni.request({      method,      url,      data,      header: {        'content-type': 'application/json',      },      success: (res) =&gt; {        if (res.statusCode === 200) {          resolve(res.data);        } else {          reject(new Error(res.statusCode));        }      },      fail: (err) =&gt; {        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) =&gt; {    uni.request({      method,      url: `${baseUrl}${url}`,      data,      header: {        ...headers,        'content-type': 'application/json',      },      timeout,      success: (res) =&gt; {        if (res.statusCode === 200) {          resolve(res.data);        } else {          reject(new Error(res.statusCode));        }      },      fail: (err) =&gt; {        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) =&gt; {    options.header['token'] = uni.getStorageSync('token');    return options;  });  return new Promise((resolve, reject) =&gt; {    uni.request({      method,      url: `${baseUrl}${url}`,      data,      header: {        ...headers,        'content-type': 'application/json',      },      timeout,      success: (res) =&gt; {        if (res.statusCode === 200) {          resolve(res.data);        } else {          reject(new Error(res.statusCode));        }      },      fail: (err) =&gt; {        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的请求封装

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项