微信小程序-封装Request功能，请求接口

十年河东，十年河西，莫欺少年穷

学无止境，精益求精

 

1、在项目中新建Request/Request.js 文件，用来封装统一请求方法，代码如下

fn 为 一个方法 例如 this.getData 注意 不能带括弧 否则 就执行了
// function GetToken(fn){
//   wx.request({
//    url: URL+'/api/Jwt/HttpGetJwtToken',
//    success: (result) => {
//       var data=result.data.ResultMessage;
//       wx.setStorageSync('Token', data);
//       console.log(fn)
//       fn();
//    },
//    fail: (res) => {},
//    complete: (res) => {},
//  })
// }
// export const request=(parm,fn)=>{
//   return new Promise((resolve,reject)=>{
//     parm.header={"Authorization":wx.getStorageSync('Token')};
//      wx.request({
//       ...parm,
//       success:(result)=>{
//         console.log(result.statusCode)
//        if(result.statusCode==401){
//          //Token 过期
//          wx.removeStorageSync('Token');
//          GetToken(fn);
//        }
//        else{
//         resolve(result.data);
//        }

//       },
//       fail:(err)=>{
//         reject(err);
//       }
//      })
//   })
// }

/*
wx-request 中的参数如下
{
    url: 'url', //请求的URL
    data: data, //POST 请求中需要传递 data 对象
    dataType: dataType, // 返回的数据格式
    enableCache: true,  //是否开启缓存
    enableHttp2: true,
    enableQuic: true,
    header: header,    //HTTP 请求头 一般传递 TOKEN
    method: method,   // GET /  POST
    responseType: responseType,  // 响应的数据类型
    timeout: 0,   // 请求超时时间
    success: (result) => {},  //成功时 回调
    fail: (res) => {},
    complete: (res) => {},
  }
*/
///参数 parm 是个对象 详见上述备注 wx-request 中的参数，
export const request = (parm) => {
  //详细请查询ES6 Promise 用法
  return new Promise((resolve, reject) => {
    // 请求头中 header 带上 Token 这样，其他页面使用该方法时，无需再传递Token
    parm.header = {
      "Authorization": wx.getStorageSync('Token')
    };
    wx.request({
      ...parm, // 展开对象  结合对象
      success: (result) => {
        console.log(result.statusCode)
        // 401 时  Token 过期 或 无效Token
        if (result.statusCode == 401) {
          //Token 过期
          wx.removeStorageSync('Token'); //移除TOKEN
          wx.request({  //重新获取Token
            url: URL+'/IotApiTest/api/Jwt/HttpGetJwtToken',
            success: (result) => { //重新获取Token 并存储
              var data = result.data.ResultMessage;
              wx.setStorageSync('Token', data); 
              parm.header = { 
                "Authorization": wx.getStorageSync('Token')
              };
              wx.request({  //再次请求原方法
                ...parm,
                success(res) {
                  resolve(res.data);
                }
              })
            },
            fail: (res) => {},
            complete: (res) => {},
          })
        } else {
          resolve(result.data);
        }

      },
      fail: (err) => {
        reject(err);
      }
    })
  })
}

2、将Request注入到App.js中，这样，其他page页面就可以访问Request了。其他页面需要引入App.js  ，引入方法为：

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageData: []
  },
})

在小程序应用程序第一次加载时，获取请求所需要的凭据Token，当然，你也可以在这里获取用户基本信息，存储在本地.

App.js

 引入公共请求JS  Request ，初次加载获取Token 并存储

import {
  request
} from "./Request/Request";
App({
  request: request,
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    this.GetToken();
  },

  GetToken() {
    wx.request({
      url: URL+'/api/Jwt/HttpGetJwtToken',
      success: (result) => {
        console.log();
        var data = result.data.ResultMessage;
        wx.setStorageSync('Token', data);
      },
      fail: (res) => {},
      complete: (res) => {},
    })
  },
 
})

最后，我们在 Index.js 中，我们使用Request进行模拟请求

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageData: []
  },
  async GetData() {
    let that = this;
    var res = await app.request({
      url: Uri+'/api/Echats/SearchBatterys',
      data: {
        "OutLineTime": -135,
        "PageNumber": 1,
        "PageSize": 10
      },
      method: "post"
      
    });
    console.log(res)
   return res
  },

async   GetData2() {
    let that=this;
    var s= await that.GetData();
   // console.log(s);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     this.GetData();
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

注意：方法里的 async 和 await 关键字，用于表示 异步方法，等待异步执行的结果。

 

重新封装

Request.js  新增了变量  URL ，这样在APP.JS 中就可以使用了，同时，其他页面只需传递相对路径，因为在里面有如下代码

 parm.header = {
      "Authorization": wx.getStorageSync('Token')
    };
    parm.url=URL+ parm.url;

重新对parm.url 赋值

Request.Js 代码如下：

/*
wx-request 中的参数如下
{
    url: 'url', //请求的URL
    data: data, //POST 请求中需要传递 data 对象
    dataType: dataType, // 返回的数据格式
    enableCache: true,  //是否开启缓存
    enableHttp2: true,
    enableQuic: true,
    header: header,    //HTTP 请求头 一般传递 TOKEN
    method: method,   // GET /  POST
    responseType: responseType,  // 响应的数据类型
    timeout: 0,   // 请求超时时间
    success: (result) => {},  //成功时 回调
    fail: (res) => {},
    complete: (res) => {},
  }
*/
///参数 parm 是个对象 详见上述备注 wx-request 中的参数，
var URL="http://xxxxx.com";
export const request = (parm) => {
  //详细请查询ES6 Promise 用法
  return new Promise((resolve, reject) => {
    // 请求头中 header 带上 Token 这样，其他页面使用该方法时，无需再传递Token
    parm.header = {
      "Authorization": wx.getStorageSync('Token')
    };
    parm.url=URL+ parm.url;
    wx.request({
      ...parm, // 展开对象  结合对象
      success: (result) => {
        console.log(result.statusCode)
        // 401 时  Token 过期 或 无效Token
        if (result.statusCode == 401) {
          //Token 过期
          wx.removeStorageSync('Token'); //移除TOKEN
          wx.request({  //重新获取Token
            url: URL+'/api/Jwt/HttpGetJwtToken',
            success: (result) => { //重新获取Token 并存储
              var data = result.data.ResultMessage;
              wx.setStorageSync('Token', data); 
              parm.header = { 
                "Authorization": wx.getStorageSync('Token')
              };
              wx.request({  //再次请求
                ...parm,
                success(res) {
                  resolve(res.data);
                }
              })
            },
            fail: (res) => {},
            complete: (res) => {},
          })
        } else {
          resolve(result.data);
        }

      },
      fail: (err) => {
        reject(err);
      }
    })
  })
}

View Code