微信小程序请求封装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 也是一样的方式，这里就不过多演示了
希望大家能提出积极的建议，有问题可以联系我