微信小程序request封装 和 Token鉴权流程

1.utils下面新建config文件用来配置请求接口文件

utils/config.js

class Config {
  constructor() {}
}
//接口请求地址
Config.restUrl = "";

export { Config }; 

2.创建token文件

token.js

// 引用使用es6的module引入和定义
// 全局变量以g_开头
// 私有函数以_开头

import { Config } from 'config.js';

class Token {
    constructor() {
        this.verifyUrl = Config.restUrl + 'token/verify'; //校验token接口
        this.tokenUrl = Config.restUrl + 'token/user'; //获取token接口
    }

    verify() {
        var token = wx.getStorageSync('token');
        if (!token) {
            this.getTokenFromServer();
        }
        else {
            this._veirfyFromServer(token);
        } 
    }

    _veirfyFromServer(token) {
        var that = this;
        wx.request({
            url: that.verifyUrl,
            method: 'POST',
            data: {
                token: token
            },
            success: function (res) {
                var valid = res.data.isValid;
                if(!valid){
                    that.getTokenFromServer();
                }
            }
        })
    }

    getTokenFromServer(callBack) {
        var that  = this;
        wx.login({
            success: function (res) {
                wx.request({
                    url: that.tokenUrl,
                    method:'POST',
                    data:{
                        code:res.code
                    },
                    success:function(res){
                        wx.setStorageSync('token', res.data.token);
                        callBack && callBack(res.data.token);
                    }
                })
            }
        })
    }
}

export {Token};

3.新建请求封装文件

request.js

import { Config } from "config.js";

class Request {

  constructor() {
    //config封装的接口URL
    this.RequestUrl = Config.restUrl; 
  }

  //http 请求类, 当noRefech为true时，不做未授权重试机制
  request(params,noRefetch) {
    var that = this;
    var url = this.RequestUrl + params.url;

    //如果未设置请求参数，则默认GET
    if (!params.method) {
      params.type = 'GET';
    }

    //请求接口
    wx.request({
      url: url,
      data: params.data,
      method: params.method,
      header: {
        'content-type': 'application/json',
        'token': wx.getStorageSync('token') //获取缓存的token
      },//token
      success: function (res) {
        // 判断以2（2xx)开头的状态码为正确
        // 异常不要返回到回调中，就在request中处理，记录日志并showToast一个统一的错误即可
        var code = res.statusCode.toString();
        //获取状态码开头
        var startChar = code.charAt(0);
        if (startChar == '2') {
          params.sCallback && params.sCallback(res.data);
      } else {
          //token校验失败
          if (code == '401') {
              if (!noRefetch) {
                  //重新获取Tokne重新请求一次
                  that._refetch(params);
              }
          }
          //两次都调用失败打印错误日志
          that._processError(res);
          //返回错误信息
          params.eCallback && params.eCallback(res.data);
      }
      }, fail: function (err) {
        that._processError(err);
      }
    })
  }

  _processError(err){
    console.log(err);
  }
  
  _refetch(param){
    var token = new Token();
    //重新获取Token
    token.getTokenFromServer((token) => {
        //获取完成重新调用当前接口
        this.request(param, true);
    });
  }
}

export { Request };

4.初始化Token

var token = new Token();
token.verify();

5.请求接口

（1）新建order.js

import {Request} from '../../utils/request.js'

class Order extends Request{
    constructor(){
        super();
    }

    /*下订单*/
    doOrder(param,callback){
        var that=this;
        var allParams = {
            url: 'order',
            type:'post',
            data:{products:param},
            sCallback: function (data) {
                that.execSetStorageSync(true);
                callback && callback(data);
            },
            eCallback:function(){
                }
            };
        this.request(allParams);
    }
}

export {Order};

（2）调用model方法

import {Order} from '../order/order-model.js';
var order=new Order();

onLoad: function (options) {
           
},

//创建订单
createOrder(){
    order.doOrder(orderInfo,(data)=>{
       //订单生成成功
       if(data.pass) {
            //更新订单状态
       }else{
            that._orderFail(data);  // 下单失败
       }
    });
}