es6 promise— 封裝HTTP請求

剛開始開發微信小程序一直用的一位大神的微信小程序的http封裝

這裏附上傳送門，有詳細說明，我就不說了

傳送門

 appRequest(methods, url, data, callback, errFun) {
    wx.request({
      url: url,
      method: methods,
      header: {
        'content-type': methods == 'GET' ? 'application/json' : 'application/x-www-form-urlencoded',
        "cookie": "t=" + wx.getStorageSync("t"),
      },
      dataType: 'json',
      data: data,
      success: function(res) {
        callback(res.data);
      },
      fail: function(err) {
        errFun(err);
        wx.showToast({
          title: '服務器錯誤~',
          icon: 'none'
        })
      }
    });
  }

但是當請求併發複雜的時候，有些問題是不好解決的（比如：異步,回調地獄，請求互調等）

，因此，自己試着改用ES6 的promise進行重新封裝

===============================================================================================

在代碼裏詳細說明註釋了，拿即可用(這裏只做簡單說明)

每個人，每個項目需求封裝的http是不一樣的，可以根據實際業務需求，進行改寫----------

因爲環境不同切換不同環境， server_address是函數的總地址
const server_address = 'https://地址.com/api'; //接口總地址 測試環境
// const server_address = 'https://地址/api';//接口總地址 生產環境

/ *函數封裝兩層，界面調用爲第三層，優點是，頁面調用的時候，完全不用考慮請求，直接根據請求調用不同的方法
 *參數說明：
 * url, 請求地址；  params:請求參數，如果沒有 傳入{}就好（不以data命名是因爲data出現率較高）
 *isLoading 是微信小程序的loading 框  不做微信小程序或者不需要可以摒棄這個參數，刪除相關內容便可
* / 

-----判斷請求是否成功條件不同，這裏是用res.data.meta.success 是否爲true 具體看個人需求修改

// 因爲環境不同切換不同環境， server_address是函數的總地址
const server_address = 'https://地址.com/api'; //接口總地址 測試環境
// const server_address = 'https://地址/api';//接口總地址 生產環境
/*
*函數封裝兩層，界面調用爲第三層，優點是，頁面調用的時候，完全不用考慮請求，直接根據請求調用不同的方法
*參數說明：
* url, 請求地址；  params:請求參數，如果沒有 傳入{}就好（不以data命名是因爲data出現率較高）
*isLoading 是微信小程序的loading 框  不做微信小程序或者不需要可以摒棄這個參數，刪除相關內容便可
*/ 
// 方法盒子，封裝的第二層
const https = { // 封裝http對象
  // isLoading  請求需要loading時加 
  get: function(url, params={}, isLoading=false) {
    return getPromise('GET', url, params, isLoading)
  },
  post: function(url, params={}, isLoading=false) {
    return getPromise('POST', url, params, isLoading)
  },
}
// 封裝的第一層，也是函數封裝的最底層
const getPromise = (method, url, params, isLoading) => {
  if (isLoading) {
    // 點擊事件必加，且防止穿透
    wx.showLoading({
      title: '加載中...',
      mask: true
    });
  }
  let sessionId = wx.getStorageSync("t"); // 這裏吧sessionId叫成了t  即微信唯一標識，根據場景需求可以改成不同的命名方式
  return new Promise((resolve, reject) => {
      wx.request({
        url: server_address + url,
        method: method,
        data: params,
        dataType: 'json',
        header: {
          'content-type': method == 'GET' ? 'application/json' : 'application/x-www-form-urlencoded',
          'Cookie': 't=' + sessionId
        },
        success: (res) => {
          // console.log(res);
          // if (sessionId == "" || sessionId == null) {
          //   wx.getStorageSync("t", res.data.info.sessionId); // 本地沒有就說明第一次請求，把返回的sessionId 存入本地
          // }
          let data = res.data;
          if (data.meta.success) {
            resolve(res.data);
          } else {
            wx.showToast({
              title:'服務器奔潰',
              icon: 'none',
              duration: 2000,
              mask: true,
            })
          }
        },
        fail: (err) => {
          wx.showToast({
            title: '服務器奔潰啦~~~',
            icon: 'none',
            duration: 2000,
            mask: true
          })
          reject(err.data)
        },
        complete: () => {
          if (isLoading) {
            wx.hideLoading();
          }
        }
      })
    })
    .catch(res => {
      console.log(res);
      wx.showToast({
        title:'請求失敗!',
        icon:'none,
      })
    })
}
// 單獨放置
 // module.exports = https
export {http}

在js 裏調用

如果在微信小程序調用一定要用相對路徑，絕對路徑會報錯，具體可能是微信小程序的bug吧

引用：

// const https = require("../../utils/http.js");
import {http} form("../../utils/http.js");

引用後：

// 根據不同的請求調用不同的方法，
// 如果data爲空,還需要loading 則 data 寫成{}，如都不需要只寫http.get(url).then(res=>{})
// 如果不需要微信的loading 或者不是在微信小程序裏寫，則不需要第三個參數，如果需要寫true
  http.get(url, {},true).then(res => {
      console.log(res);
   })
// 可以不斷的.then
    .then(res=>{})