点这里

查看进阶版请求封装(拦截器:处理token过期之后的无感知登录+重新发起刚才未成功的请求)

在这里插入图片描述

  1. 新建一个文件夹request(随便起)
  2. 新建env.js
    2.1 在这里,配置接口地址的公共地址部分、方便后续引用。
	//这里使用的接口呢都是自己模拟的,可以根据自己的需求进行添加
    module.exports={
        //开发环境的url
        dev:{
            baseUrl:"http://xxxx"
        },
        //测试环境url
        test:{
            // baseUrl:"http://www.test.com"
        },
        //线上环境url
        prod:{
            // baseUrl:'https://api.it120.cc'
            baseUrl:"https://xxx"
        }
    }
  1. 新建request.js
    3.1 引入env中的url:项目接口地址的公共地址部分。
    3.2 二次封装wx.request
// 引入env中的url
const {
    baseUrl
} = require('./env.js').dev;//这里上线的时候换成线上地址

module.exports = {
    /**
     * 二次封装wx.request
     * url:请求的接口地址
     * method:请求方式 GET,POST....
     *  data:要传递的参数
     * header:请求头
     */
    request: (url, method, data, header) => {
    
        // console.log('这是我封装的ajax请求', url, method, data, header);
        
        let _url = `${baseUrl}/${url}`;//这里使用ES6的写法拼接的字符串
        
        return new Promise((resolve, reject) => {
            // wx.showLoading({
            //     title: '正在加载',
            // });
            wx.request({
                url: _url,
                method: method,
                data: data,
                header: header,
                success: (res) => {
                    // console.log('从接口获取到的数据', res);
                    let data = res.data;
                    if (res.statusCode == 200) {
                        // wx.hideLoading();
                        //统一拦截--------401未登录活登录已过期token过期
                        if (data.code == 401) {
                            // wx.hideLoading();
                            wx.reLaunch({
                                url: '/pages/login/login?token=0',//拼接参数--表明是401--过去的
                            })
                        }
                        if (data.code == 200) {
                            resolve(res.data);
                            // wx.hideLoading();
                            // wx.showToast({
                            //     title: '请求成功',
                            // })
                        }
                        if (data.code == 500) {
                            // wx.hideLoading();
                            wx.showToast({
                                title: '操作失败',
                                icon: 'none',
                                duration: 2000
                            })
                        }
                        if (data.code == 404) {
                            // wx.hideLoading();
                            wx.showToast({
                                title: '参数效验失败',
                                icon: 'none'
                            })
                        }
                        if (data.code == 403) {
                            // wx.hideLoading();
                            wx.showToast({
                                title: '没有相关权限',
                                icon: 'none'
                            })
                        }
                        if (data.code == 402) {
                            wx.hideLoading();
                            wx.showToast({
                                title: '账户已禁用',
                                icon: 'none'
                            })
                        }
                    } else {
                        // wx.hideLoading();
                        wx.showToast({
                            title: '请求有误',
                            icon: 'none'
                        })
                    }
                },
                fail() {
                    // wx.hideLoading();
                    reject('发送失败');
                    wx.reLaunch({
                        url: '/pages/login/login', //
                    })
                    wx.showModal({
                        title: '提示',
                        content: '网络错误',
                        success(res) {
                            if (res.confirm) {
                                console.log('用户点击确定');
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    })
                }
            });

        });
    },
}

  1. 新建api.js:在这里放左右的请求方法。
    4.1 引入封装的reuest请求。
    4.2 写入自己的请求方法。
//引入封装的reuest请求
const {
    request
} = require('./request.js');

const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';


//请求头根据自己的情况配置

//这个是发送登录请求的请求头不需要携带token
//const headerPost = {
//    'content-type': 'application/json',
//};

//这里的请求头需要携带token--但是直接在这里获取会有异步,所以我实在要请求数据的地方获取存在本地的token


// const headerPostToken = {
//     'content-type': 'application/json',
//     'QS_TOKEN': app.globalData.token
// };
// const headerGet = {
//     'content-type': 'application/x-www-form-urlencoded',
//     'QS_TOKEN': wx.getStorageSync('QS_TOKEN')
// };


//基于业务封装的接口
module.exports = {

    /*企业认证-----POST
    参数: */
    certification: (data, headerPostToken) => {
        return request('comp/certification', POST, data, headerPostToken);
    },
    
    /*个人中心-----GET
    参数:  */
    PersonalCenter: (header) => {
        console.log('api', header);
        return request('user', GET, '', header); //没有请求参数,所以为空(如果不加【'',】的话就会出错)
    },
    
    
    /*获取产品列表-----GET
       参数:*/
    getShopList: (searchCode, status, header) => {
        return request('storage/list?searchCode=' + searchCode + '&status=' + status + '&page=1&limit=1000', GET, '', header);
    },
    
}
  1. 引用方法—在你需要用到该方法的页面的js;[eg:index.js]
    5.1 引入方法
//1.引入方法
const { getShopList } = require('../../request/api.js');


  // 请求产品列表
  getAllOrders(searchCode, status) {
    // console.log(status, '调用了获取库存的方法');
    var that = this;

   //获取token---设置请求头
    var header = {
      'content-type': 'application/x-www-form-urlencoded',
      'QS_TOKEN': wx.getStorageSync('QS_TOKEN')
    };
    
    

    // 进入请求所有订单数量
    getShopList(searchCode, status, header).then(resData => {
      // console.log('请求成功----',status,'---', resData);
      if (resData.code == 200) {
        // 请求成功
        
      }
    }).catch(err => {
      // console.log(err)
    })
  },


这里查看进阶版请求封装

(拦截器:处理token过期之后的无感知登录+重新发起刚才未成功的请求)

Logo

欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

更多推荐