微信小程序-封裝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請求的封裝微信小程序封裝請求接口微信小程序封裝請求接口方法微信小程序HTTP接口請求封裝微信小程序wx.request的簡單封裝（接口封裝）微信小程序設置全局請求URL 封裝wx.request請求微信小程序HTTP請求封裝