摘要：開(kāi)始寫(xiě)小程序的時(shí)候?qū)π〕绦蛘?qǐng)求接口的相當(dāng)無(wú)奈，因?yàn)轫?xiàng)目急就沒(méi)考慮那么多，直接開(kāi)干。

開(kāi)始寫(xiě)小程序的時(shí)候?qū)π〕绦蛘?qǐng)求接口的requestAPI相當(dāng)無(wú)奈，因?yàn)轫?xiàng)目急就沒(méi)考慮那么多，直接開(kāi)干。后邊閑下來(lái)就考慮了一下做了一個(gè)封裝，來(lái)統(tǒng)一做一些數(shù)據(jù)處理，達(dá)到減輕開(kāi)發(fā)重復(fù)性，優(yōu)化代碼的作用：

首先我封裝了一個(gè)類(lèi)：

import { base_url } from "../config/api" // 引入我們接口的ip，后續(xù)我們只需要傳入api

const tips = {
    1: "抱歉，出現(xiàn)了一個(gè)錯(cuò)誤",
    1005: "appkey無(wú)效，請(qǐng)求錯(cuò)誤",
    3000: "沒(méi)有權(quán)限",
    ...
} // 多種錯(cuò)誤處理字符串


----------


export default class HTTP {
    fetch (params) {
        const {
                url,
                method = "GET",
                data = {},
                success
              } = params                            // es6對(duì)象解構(gòu)請(qǐng)求是我們需要的傳參和成功的處理
              
        wx.request({
            url: base_url + url,
            method,
            data,
            header: {
              "Content-Type": "application/json"
            },
            success: res => {
                const { code } = res.data
                
                if (code === 0) {                  // 與后臺(tái)約定的成功判斷
                    success && success(res.data)   // 成功的回調(diào)
                    return
                }
                
                const { error_code } = res.data
                this._show_error(error_code)       // 失敗的處理，彈出提示框
            },
            fail: err => {
                this._show_error(1)                // 失敗的處理，彈出提示框
            }
        })
    }
    
    _show_error (error_code = 1) {
        const tip = tips[error_code]
        
        wx.showToast({
            title: tip ? tip : tips[1],
            icon: "none",
            duration: 2000
        })
    }
}

這里，我們做了一個(gè)簡(jiǎn)單的基礎(chǔ)封裝，但是也是必須從回調(diào)中做出相應(yīng)的處理，如果我們需要一個(gè)變量直接拿到這次請(qǐng)求的數(shù)據(jù)呢，那我們就需要用到promise， async await 來(lái)進(jìn)行處理了，代碼如下：

import { base_url } from "../config/api" // 引入我們接口的ip，后續(xù)我們只需要傳入api

const tips = {
    1: "抱歉，出現(xiàn)了一個(gè)錯(cuò)誤",
    1005: "appkey無(wú)效，請(qǐng)求錯(cuò)誤",
    3000: "沒(méi)有權(quán)限",
    ...
} // 多種錯(cuò)誤處理字符串

export default class HTTP {
    fetch (params) {
      return new Promise((resolve, reject) => {
         const {
                url,
                method = "GET",
                data = {},
                success
              } = params                            // es6對(duì)象解構(gòu)請(qǐng)求是我們需要的傳參和成功的處理
              
         wx.showLoading("加載中")    
              
         wx.request({
            url: base_url + url,
            method,
            data,
            header: {
              "Content-Type": "application/json"
            },
            success: res => {
                const {
                    data = {},                     // data默認(rèn)是一個(gè)對(duì)象
                    data : { code, msg }
                } = res
                
                if (code === 0) {                  // 與后臺(tái)約定的成功判斷
                    wx.showToast({ title: msg })
                    resolve([null, _data])         // 成功的回調(diào)
                    return
                }
                
                const { error_code } = res.data
                this._show_error(error_code)       // 失敗的處理，彈出提示框
                reject([data])                     // 失敗的回調(diào)，并暴露出數(shù)據(jù)
            },
            fail: err => {
                this._show_error(1)                // 失敗的處理，彈出提示框
                reject([{msg = "請(qǐng)求出錯(cuò)"}])                     // 失敗處理
            }，
            complete: () => {
                wx.hideLoading("加載中")
            }
        }).catch(err => err)
      }
   })
        
    
    _show_error (error_code = 1) {
        const tip = tips[error_code]
        
        wx.showToast({
            title: tip ? tip : tips[1],
            icon: "none",
            duration: 2000
        })
    }
}

然后我們?cè)谡{(diào)用的時(shí)候直接利用async和await：

import HTTP from "../util/HTTP "
import api from "../api"  // 引入接口

class Model extends HTTP {
    async search (data) {
        const [err, res] = await this.Fetch({
          url: api,
          data
        })
        
     if(err){
         //失敗做的對(duì)應(yīng)處理
         return
     }
     
     // 成功的對(duì)應(yīng)處理
  }
}

如果不采用繼承的方式，那么直接實(shí)例化HTTP然后調(diào)取fetch也是一樣的方式，這里就不過(guò)多演示了
希望大家能提出積極的建議，有問(wèn)題可以聯(lián)系我