微信小程序Request請求封裝

用ES6Promise對象對wx.request進行封裝
描述:wx.request是微信小程序提供的Api請求方法,success是請求成功的回調,fail是請求失敗的回調,
咱們用es6的Promise對象對該方法進行封裝。
好處:方便咱們對請求的異步處理,減小了咱們的業務代碼。es6

1.封裝底層代碼編程

//wx.request請求數據
  requestData(method, url, data, header) {
    if (!url || !method) return;
    return new Promise((resolve, reject) => {
      wx.request({
        url: url,
        data: data || {},
        header: header || {},
        method: method.toLocaleUpperCase(),
        success: function (res) {
          resolve(res);
        },
        fail: function (res) {
          reject(res.errMsg || '發送網絡錯誤(http fail)');
        }
      });
    });
  }

2.將咱們小程序全部api請求進行模塊化編程,建立一個api.js,定義一個Api類進行2次封裝小程序

class Api {
    constructor() {
      //此處寫一些默認取值,例如拿storage裏面的數據
    //例如wx.getStorageSync("...");
  }

  //調用示例
  getMyTestData(code) {
    let self = this;
    //定義api請求地址
    let url = '';
    let postData = {
        //向api發送的數據
    };
    //調用上面封裝好的wx.request請求,返回了一個Promise對象
    return self.requestData('post', url, postData);
    }
}

//咱們將定義的Api類導入出去,而後咱們小程序內其它js能夠引入該js調用了
module.exports = {
  Api: Api
}

3.具體業務js的調用方式
//導入咱們定義的Api類
import { Api } from '../../utils/api.js'; //具體路徑根據本身項目結構來,填寫相對路徑
//定義一個變量獲得Api類的實例,而後咱們就能夠經過api這個對象去請求數據了
const api = new Api();微信小程序

//具體調用api

Test() {
    let self = this;
    //此處調用Api類裏面定義的具體業務請求方法
    let xxxPromise = api.getMyTestData(//此處傳入具體參數).then( res => {
        console.log("請求成功返回結果:", res);
        //執行你的業務邏輯代碼
        //
        //
    }).catch( res => {
        console.error("請求失敗返回結果:", res);
    });
    //此處我須要等待上述請求執行成功後才能作其餘處理的話就這樣寫
    xxxPromise.then(() =>{
        //會等上面請求執行完再執行
        //
        //
    });
}
相關文章
相關標籤/搜索