【微信小程序请求封装】【进阶版】处理401请求token过期--重新登录--重新发起刚才过期的请求

微信小程序请求封装（拦截器）：处理请求过期–重新登录–重新发起刚才过期的请求

env.js

 //这里使用的接口呢都是自己模拟的，可以根据自己的需求进行添加module.exports={//开发环境的urldev:{ baseUrl:"https:// "},//测试环境urltest:{// baseUrl:"http://www.test.com"},//线上环境urlprod:{// baseUrl:'https://api.it120.cc' }}

http.js

// const {//     baseUrl
// } = require('./env.js').dev;
const {baseUrl
} = require('./env.js').prod;const appid = '';
// const appid = ' ';
let isRefreshing = true;
let subscribers = [];function onAccessTokenFetched() {subscribers.forEach((callback) => {callback();})subscribers = [];
}function addSubscriber(callback) {subscribers.push(callback);console.log('重新请求的队列', callback, subscribers)
}let userInfo = '';wx.getStorage({key: 'userInfo',success(res) {// console.log(res.data.userInfo);userInfo = res.data.userInfo;}
});export class Http {constructor() {}request({url,data = {},method,header,callback = '',type,} = {}) {let _this = this;let _url = `${baseUrl}/${url}`;return new Promise((resolve, reject) => {// wx.showLoading({//     title: '正在加载',// });wx.request({url: _url,data,method,header: {'content-type': type,'QS_TOKEN': wx.getStorageSync('QS_TOKEN')},callback,fail(res) {// setTimeout(function () {//     wx.hideLoading()// }, 200)// reject(res)reject('发送失败');wx.showToast({title: '网络错误',icon: 'none',duration: 2000})// wx.showModal({//     title: '提示',//     content: '网络错误',//     success(res) {//         if (res.confirm) {//             console.log('用户点击确定');//         } else if (res.cancel) {//             console.log('用户点击取消');//         }//     }// })},complete: res => {setTimeout(function () {wx.hideLoading()}, 300)//console.log('这里是请求canshu-----------------', url, data, method, header, res, wx.getStorageSync('QS_TOKEN'));if (callback) return callback(res.data);if (res.statusCode == 200) {if (res.data.code == 200) {resolve(res.data);}//统一拦截if (res.data.code == 401) {console.log('触发了一次401', url, )wx.setStorageSync('isLogin', false)// wx.showToast({//     title: '登录已过期',// })// 将需要重新执行的接口缓存到一个队列中if (userInfo) {addSubscriber(() => {_this.request({url,data,method,header,callback: resolve,type,})})}// console.log('这里是isRefreshing的值----', isRefreshing)if (isRefreshing) {getNewToken().then(() => {// 依次去执行缓存的接口onAccessTokenFetched();isRefreshing = true;})}isRefreshing = false;//    console.log('这里是isRefreshing的值', isRefreshing)}if (res.data.code == 500) {// wx.hideLoading();wx.showToast({title: '操作失败',icon: 'none',duration: 2000})}if (res.data.code == 404) {// wx.hideLoading();wx.showToast({title: '参数效验失败',icon: 'none'})}if (res.data.code == 403) {// wx.hideLoading();wx.showToast({title: '没有相关权限',icon: 'none'})}if (res.data.code == 402) {wx.hideLoading(); }} else {// wx.hideLoading();wx.showToast({title: '请求有误',icon: 'none'})}}})})}
}// 获取token
const getNewToken = () => {return new Promise((resolve, reject) => {wx.login({success(res) {console.log('执行了重新登录的方法', res, userInfo);let userInfo = '';wx.getStorage({key: 'userInfo',success(resData) {userInfo = resData.data;if (userInfo) {wx.request({url: `${baseUrl}/wx/user/${appid}/login3`,data: {"code": res.code,"signature": userInfo.signature,"rawData": userInfo.rawData,"encryptedData": userInfo.encryptedData,"iv": userInfo.iv},method: 'POST',header: {'content-type': 'application/json',},success(res) {console.log('重新登陆成功返回', res);let r = res.data;// 将所有存储到观察者数组中的请求重新执行。if (res.data.code == 200) {//                         // 登录成功// const token = r['data']['token'];wx.hideLoading();wx.setStorageSync("QS_TOKEN", res.data.data);wx.setStorageSync('isLogin', true);resolve(res); //通过Promise的 resolve(),把返回的结果暴露出去  这个暴露好像用处不太大， 可以不用} else {wx.removeStorageSync('QS_TOKEN');}}})} else {wx.showToast({title: '请先登录',icon: 'none'})console.log('这里是拦截器---还没有登录哦', );}}});},fail(err) {reject()console.error('wx login fail', err);}});})
}

httpAPI

import {Http
} from './http.js';const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';export class Index extends Http {constructor() {super();}// GET// 获取产品列表getShopList(data, type) {return this.request({url: 'v2/storage/list',method: GET,data: data,type: type});}// POST //  删除采购信息 delBuyNeed(data, type) {return this.request({url: 'v2/buyNeedAction/del',method: POST,data: data,type: type});}}

1.引入


import {Index
} from '../../request/httpAPI.js';
const API = new Index();
const app = getApp()

2.请求参数：header。请求头的type（get和post不同）


// const headerPostToken = {//     'content-type': 'application/json',
// };
// const headerGet = {//     'content-type': 'application/x-www-form-urlencoded',
// };//所以直接存在app.js中，全局引用globalData: {headHeight: 0, //总高度barHeight: 0, //胶囊高度barTop: 0, //上填充的高度typePOST: 'application/json',typeGET: 'application/x-www-form-urlencoded',typeLOGIN: 'application/json',},

3.1 发送请求。POST

//2.方法：data：参数、app.globalData.typePOST：请求头的type（get和post不同）API.delBuyNeed(data, app.globalData.typePOST).then(resData => { if (resData.code == 200) {// 请求成功 }}).catch(err => {// console.log(err)})

3.2 发送请求。GET

// 请求订单列表getAllOrders(searchCode, status, inventoryType, auditState, page, limit ) { var that = this; var data = {'searchCode': searchCode, 'page': page,//请求参数（需要分页）'limit': limit,//请求参数（需要分页）}; API.getShopList(data, app.globalData.typeGET).then(resData => { // console.log('请求成功----', status, '---', resData);if (resData.code == 200) {// 请求成功  }}).catch(err => {// console.log(err)})},

上拉加载、分页请求点这里

【微信小程序请求封装】【进阶版】处理401请求token过期--重新登录--重新发起刚才过期的请求相关推荐

小程序promise封装post请求_微信小程序promise封装get/post请求
微信小程序promise封装get/post请求 2020-07-04 20:42:49 微信小程序promise封装get/post请求叶子兔 2018-10-10 08:55:30 1056 ...
小程序中封装ajax请求,如何在微信小程序中封装网络请求
如何在微信小程序中封装网络请求发布时间:2021-05-11 16:59:36 来源:亿速云阅读:95 作者:Leah 这期内容当中小编将会给大家带来有关如何在微信小程序中封装网络请求,文章内容丰 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序如何封装api接口
微信小程序如何封装api接口一. 小程序接口请求流程二,域名配置一定要配置https,小程序上配置的域名必须是域名备案的三.打开微信开发者工具,打开你的项目,点开详情.确认一下域名是否一一匹对 ...
微信小程序开发笔记进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
python写的小程序怎么封装_Promise实现微信小程序接口封装过程
Promise实现微信小程序接口封装过程发布时间:2020-06-15 13:40:43 来源:亿速云阅读:419 作者:鸽子相信很多开发者都遇到过回调地狱的问题.由于微信小程序的API基本都是 ...
微信小程序简单封装接口
微信小程序接口封装比如说,现在我要访问后台数据,我面临两个问题: 我可能在多个模块中向后台发送数据请求,每次都需要再写一遍url 地址当获取数据的地址发生变化时,我需要修改项目中所有的url地址 ...
微信小程序如何封装自己的组件？
在现在前端领域,最常见的话语就是组件化.工程化的内容.所有的框架都在朝着这方面发展.作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发. 在我们的日常开发中,可以封装一些常用的组件达到复用效果 ...
微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...

【微信小程序请求封装】【进阶版】处理401请求token过期--重新登录--重新发起刚才过期的请求

微信小程序请求封装（拦截器）：处理请求过期–重新登录–重新发起刚才过期的请求

env.js

http.js

httpAPI

1.引入

2.请求参数：header。请求头的type（get和post不同）

3.1 发送请求。POST

3.2 发送请求。GET

上拉加载、分页请求点这里

【微信小程序请求封装】【进阶版】处理401请求token过期--重新登录--重新发起刚才过期的请求相关推荐

最新文章

热门文章

【 微信小程序请求封装】【进阶版】处理401请求token过期--重新登录--重新发起刚才过期的请求

微信小程序请求封装（拦截器）：处理请求过期–重新登录–重新发起刚才过期的请求

env.js

http.js

httpAPI

1.引入

2.请求参数：header。请求头的type（get和post不同）

3.1 发送请求。POST

3.2 发送请求。GET

上拉加载、分页请求点这里

【 微信小程序请求封装】【进阶版】处理401请求token过期--重新登录--重新发起刚才过期的请求相关推荐

最新文章

热门文章

【微信小程序请求封装】【进阶版】处理401请求token过期--重新登录--重新发起刚才过期的请求

【微信小程序请求封装】【进阶版】处理401请求token过期--重新登录--重新发起刚才过期的请求相关推荐