微信小程序請求封裝(request)

開始寫小程序的時候對小程序請求接口的requestAPI至關無奈，由於項目急就沒考慮那麼多，直接開幹。後邊閒下來就考慮了一下作了一個封裝，來統一作一些數據處理，達到減輕開發重複性，優化代碼的做用：

首先我封裝了一個類：

import { base_url } from '../config/api' // 引入咱們接口的ip，後續咱們只須要傳入api

const tips = {
    1: '抱歉，出現了一個錯誤',
    1005: 'appkey無效，請求錯誤',
    3000: '沒有權限',
    ...
} // 多種錯誤處理字符串


----------


export default class HTTP {
    fetch (params) {
        const {
                url,
                method = 'GET',
                data = {},
                success
              } = params                            // es6對象解構請求是咱們須要的傳參和成功的處理
              
        wx.request({
            url: base_url + url,
            method,
            data,
            header: {
              'Content-Type': 'application/json'
            },
            success: res => {
                const { code } = res.data
                
                if (code === 0) {                  // 與後臺約定的成功判斷
                    success && success(res.data)   // 成功的回調
                    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
        })
    }
}

這裏，咱們作了一個簡單的基礎封裝，可是也是必須從回調中作出相應的處理，若是咱們須要一個變量直接拿到此次請求的數據呢，那咱們就須要用到promise， async await 來進行處理了，代碼以下：

import { base_url } from '../config/api' // 引入咱們接口的ip，後續咱們只須要傳入api

const tips = {
    1: '抱歉，出現了一個錯誤',
    1005: 'appkey無效，請求錯誤',
    3000: '沒有權限',
    ...
} // 多種錯誤處理字符串

export default class HTTP {
    fetch (params) {
      return new Promise((resolve, reject) => {
         const {
                url,
                method = 'GET',
                data = {},
                success
              } = params                            // es6對象解構請求是咱們須要的傳參和成功的處理
              
         wx.showLoading('加載中')    
              
         wx.request({
            url: base_url + url,
            method,
            data,
            header: {
              'Content-Type': 'application/json'
            },
            success: res => {
                const {
                    data = {},                     // data默認是一個對象
                    data : { code, msg }
                } = res
                
                if (code === 0) {                  // 與後臺約定的成功判斷
                    wx.showToast({ title: msg })
                    resolve([null, _data])         // 成功的回調
                    return
                }
                
                const { error_code } = res.data
                this._show_error(error_code)       // 失敗的處理，彈出提示框
                reject([data])                     // 失敗的回調，並暴露出數據
            },
            fail: err => {
                this._show_error(1)                // 失敗的處理，彈出提示框
                reject([{msg = '請求出錯'}])                     // 失敗處理
            }，
            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
        })
    }
}

而後咱們在調用的時候直接利用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){
         //失敗作的對應處理
         return
     }
     
     // 成功的對應處理
  }
}

若是不採用繼承的方式，那麼直接實例化HTTP而後調取fetch也是同樣的方式，這裏就不過多演示了
但願你們能提出積極的建議，有問題能夠聯繫我