uniapp中axios的封装与Ajax的调用

1、首先，我们需要在uniapp的根目录中创建一个js文件，用于保存axios的封装。

2、axios封装的第一步就是创建一个axios实例。下面为uniapp移动端创建axios实例的方法。

class Ajax {

    ajax(options = {}) {

        return http.request({

            method: options.method, // 请求方法必须大写

            url: options.url,

            data: options.data,

            // #ifdef MP-ALIPAY || MP-WEIXIN

            timeout: 30000, // 仅微信小程序（2.10.0）、支付宝小程序支持

            // #endif

            params: options.params,

            // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)

            custom: {

                isJson: options.isJson,

                needToken: options.needToken

            }, // 自定义参数

          })

    }

}

3、第二步，设置response和request拦截。移动端使用http.interceptors.request.use方法进行创建拦截。

//accessToken

        const accessToken = uni.getStorageSync(Keys.accessToken);

        //refreshToken

        const refreshToken = uni.getStorageSync(Keys.refreshToken);

        //tokenExpTime

        const tokenExpTime = uni.getStorageSync(Keys.tokenExpTime);

        //设置header信息

        config.header = {

            ...config.header,

            Authorization: accessToken,

        }

进行token验证。

4、第三步，就是导出封装好的函数。移动端除了导出函数之外，还需要导出相应的请求方法。

export default new Ajax();

export const Method = {

    GET: 'GET',

    POST: 'POST',

    PUT: 'PUT',

    DELETE: 'DELETE',

};

5、最后，就是创建发送请求的API。新建一个API的js文件，导入之前导出的方法。

export function addAddress(params) {

  return request.ajax({

    url: '/members/address',

    method: Method.POST,

    loading: true,

    needToken: true,

    params

  })

}

按照需求，在方法中携带地址和参数以及token。如果后端传的是数据流文件，则只需要返回地址即可。