uniapp中axios的封装与Ajax的调用

 时间:2024-10-12 08:23:46

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

uniapp中axios的封装与Ajax的调用

2、ax坡纠课柩ios封装的第一步就是创建一个axios实例。下面为uniapp移动端创建axios实例的方法。class Aj锾攒揉敫ax { 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 }, // 自定义参数 }) }}

uniapp中axios的封装与Ajax的调用

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验证。

uniapp中axios的封装与Ajax的调用
uniapp中axios的封装与Ajax的调用

4、第三步,就是导出封装好的函数。移动端除了导出函数之外,还需要导出相应的请求方法。export default new Ajax();export const Method = { GET: 'GET', POST: 'POST', PUT: 'PUT', DELETE: 'DELETE',};

uniapp中axios的封装与Ajax的调用

5、最后,就是创建发送请求的API。新建一个API的js文件,导入之前导出的方法。export function addAddress(params) { return request.ajax({ url: '/members/address', method: Method.POST, loading: true, needToken: true, params })}按照需求,在方法中携带地址和参数以及token。如果后端传的是数据流文件,则只需要返回地址即可。

uniapp中axios的封装与Ajax的调用
uniapp中axios的封装与Ajax的调用
uniapp中axios的封装与Ajax的调用
  • javascript中如何使用dir属性?
  • 设置table隔行变色
  • eve手游怎么出售商品
  • Excel中Unicode如何转换为汉字
  • Vsio怎样将一个绘图页的背景应用到其他绘图页
  • 热门搜索
    快乐阅读手抄报内容 小年手抄报 民间故事手抄报 手抄报关于环保 数学手抄报三年级下册 关于健康的手抄报内容 弟子规手抄报大全 关于科技的手抄报资料 呵护心灵手抄报资料 幸福班级手抄报