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

本文转载自查看原文 2021-11-05 18:08 2100 微信小程序

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

学无止境，精益求精

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

App.JS 代码如下

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

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

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {

  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {

  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {

  }
})

View Code

Index.JS 代码如下

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageData: []
  },
  async GetData() {
    let that = this;
    var res = await app.request({
      url: '/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 () {

  }
})

View Code

最后一次封装 2021-11-17 15:00

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 = "https://xxx.com/DEV/WuAnChangeApi";
export const request = (parm) => {
  //详细请查询ES6 Promise 用法
  return new Promise((resolve, reject) => {
    // 请求头中 header 带上 Token 这样，其他页面使用该方法时，无需再传递Token
    parm.header = {
      "Authorization":"Bearer "+ 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.login({
            success: (res) => {
              wx.request({ //重新获取Token
                url: URL + '/api/v1/WeChatLogin/GetWechatToken',
                method: "POST",
                header: {
                  'content-type': 'application/json'
                },
                data: {
                  code: res.code,
                  appId: wx.getAccountInfoSync().miniProgram.appId,
                  userInfo: {"nickName":"小雨","gender":1,"language":"zh_CN","city":"","province":"","country":"","avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/I4dGP3XT4YsR6mkB9YNHk0a4o7MlUrXz3LiactzVLwTT03O1B6vKArSpib5IegFnUOFCRTT7nnjHZFHqpQ79cN3A/132"}
                },
                success: (result) => { //重新获取Token 并存储
                  var data = result.data.data.token;
                  wx.setStorageSync('Token', data);
                  parm.header = {
                    "Authorization":"Bearer "+ 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

App.jS

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

  GetToken() {
    wx.login({
      success: (res) => {
        wx.request({
          url: request.URL + '/api/v1/WeChatLogin/GetWechatToken',
          data: {
            code: res.code,
            appid: wx.getAccountInfoSync().miniProgram.appId,
            userinfo: {
              "nickName": "小雨",
              "gender": 1,
              "language": "zh_CN",
              "city": "",
              "province": "",
              "country": "",
              "avatarUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/I4dGP3XT4YsR6mkB9YNHk0a4o7MlUrXz3LiactzVLwTT03O1B6vKArSpib5IegFnUOFCRTT7nnjHZFHqpQ79cN3A/132"
            }
          },
          method: "POST",
          success: (result) => {
            console.log();
            var data = result.data.ResultMessage;
            wx.setStorageSync('Token', data);
          },
          fail: (res) => {},
          complete: (res) => {},
        })
      }
    })

  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {

  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {

  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {

  }
})

View Code

Order.js 订单查询

// pages/order/order.js
var URL = "xx";

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    wxIndex: 1,
    tlcIndex: 3,
    tabType: null,
    scor: true
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     this.GetOrder();
  },



  wwcTap(e) {
    console.log(e)
    let index = e.currentTarget.dataset.index;
    this.setData({
      wxIndex: index,
      tlcIndex: 3
    });
  },
  tlcTap(e) {
    console.log(e)
    let index = e.currentTarget.dataset.index;
    this.setData({
      tlcIndex: index
    });
    if (index == 3) {
      tabType = null;
    }
    if (index == 4) {
      tabType = "门店";
    }
    if (index == 5) {
      tabType = "充电";
    }
    if (index == 6) {
      tabType = "换电";
    }
    if (index == 7) {
      tabType = "商城";
    }
  },

  async GetOrder() {
    let that = this;
    let search = {
      isComplete: true,
      pageNumber: 1,
      pageSize: 10,
      tabType: that.data.tabType
    }
    //method: method,
    var result = await app.request({
      url: "/api/v1/OrderInfo/GetOrderList",
      data: search,
      method: "POST"
    })
    console.log(result)
  }
})

@天才卧龙的博客

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 微信小程序request(ajax)接口请求封装微信小程序request(ajax)接口请求封装微信小程序 request请求封装微信小程序request请求的封装微信小程序封装request请求微信小程序 request请求封装微信小程序request请求封装微信小程序封装请求接口微信小程序request请求封装，验签微信小程序接口封装、原生接口封装、request、promise封装