这篇“微信小程序怎么制作api拦截器 ”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序怎么制作api拦截器 ”文章吧
这篇“微信小程序怎么制作api拦截器 ”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序怎么制作api拦截器 ”文章吧。
安装
npm install wxapp-api-interceptors --save使用mpVue等项目
import wxApiInterceptors from 'wxapp-api-interceptors';wxApiInterceptors(); // 必须在调用小程序api之前调用原生小程序项目
下载该项目,解压移动文件夹dist里wxApiInterceptors.js和runtime.js文件到你自己的项目,详见示例。
const wxApiInterceptors = require('./wxApiInterceptors');wxApiInterceptors(); // 必须在调用小程序api之前调用小程序api调用
不必传success、complete和fail参数。
函数式异步调用方式:
wx.showLoading({title: '登录中...'}) .then(wx.login) .then(data => wx.request.post('/login', {data})) .then(() => wx.showToast({title: '登录成功'})) .catch(() => wx.showToast({title: '登录失败'})) .finally(wx.hideLoading);也兼容原生的调用方式(不便维护):
wx.showLoading({ title: '登录中...', success: () => { wx.login({ success: (data) => { wx.request({ url: '/login', data, success: () => wx.showToast({title: '登录成功'}), fail: () => wx.showToast({title: '登录失败'}), complete: wx.hideLoading, }); }, }); },});自定义拦截器
使用方法及参数:wxApiInterceptors({[api]: {[request](params):params, [response](res):res}})
比如拦截wx.showModal的confirmColor默认值为red,调用成功后并拦截调用成功返回的结果。
wxApiInterceptors({ showModal: { request(params) { if (params.confirmColor === undefined) { params.confirmColor = 'red'; } return params; }, response(res) { res = '调用成功'; return res; }, }});wx.showModal({title: '测试'}) .then(console.log);// 控制的输出:调用成功默认拦截了request api,封装成了和axiOS差不多的使用方式
调用wx.request[method](url, [config])发送axios化的请求。
默认GET请求
wx.request('Https://test.com/banner') .then(({data}) => { console.log(data); })其他请求方式
wx.request.post('https://test.com', {data: {userName: 'test'}}) .then(({data}) => { console.log(data); })当然也可以再继续拦截request api
比如设置request api默认的host:
wxApiInterceptors({ request: { request(params) { const host = 'https://test.com' if (!/^(http|\/\/)/.test(params.url)) { params.url = host + params.url; } return params; }, },});
甚至可以拦截自己的业务状态码:
wxApiInterceptors({ request: { response(res) { const {data: {code}} = res; // 如果data里的code等于-1就响应为失败 if (code === -1) { return Promise.reject(res); } return res; }, },});强大的async拦截器
比如调用request api的时候都在header里带上本地储存的token,没有的话从服务器获取:
wxApiInterceptors({ request: { async request(params) { if (params.header === undefined) { params.header = {}; } let token = wx.getStorageSync('token'); if (!token) { ({data: token} = await wx.request('/getToken')); wx.setStorageSync('token', token); } params.header.token = token; return params; }, },});
以上就是关于“微信小程序怎么制作api拦截器 ”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网精选频道。
--结束END--
本文标题: 微信小程序怎么制作api拦截器
本文链接: https://www.lsjlt.com/news/308149.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0