前言

在小程序(其他)開發過程中,我們會遇到很多請求,如果每次都去寫一遍

wx.request({
  url: 'test.php', // 僅為示例，并非真實的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認值
  },
  success(res) {
    console.log(res.data)
  },
  fail(err){
    console.log(err)  
  }
})

煩不煩,氣不氣
尤其是同一個接口好幾個地方都要使用,有一點變動就需要全部找出來一個一個改
很不方便維護

所以我們就封裝一下,統一管理吧~

準備

在開始之前你需要了解
1.wx.request戳我了解
2.Promise戳我了解

封裝

準備完成后開始擼代碼
首先我們看下request的基本參數

url(請求地址)
一般url都是有一個固定前綴(域名),只是后面不同
例如:

https://some-domain.com/api/test1
https://some-domain.com/api/test2
https://some-domain.com/api/test3
https://some-domain.com/api/test4
...

所以我們設置一個全局常量baseUrl用來存儲前綴

const baseUrl='https://some-domain.com/api/'

2.method(HTTP 請求方法)
這里不多做解釋

const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';

3.header(請求header)
header的話根據method設置就行了,默認

header = {
          'content-type': 'application/json',
 };

4.data(參數)
get請求直接傳就可以了
post請求JSON.stringify(data)一下

封裝代碼

const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';

const baseURL = 'https://some-domain.com/api/';

function request(method, url, data) {
    return new Promise(function(resolve, reject) {
        let header = {
            'content-type': 'application/json',
        };
        wx.request({
            url: baseURL + url,
            method: method,
            data: method === POST ? JSON.stringify(data) : data,
            header: header,
            success(res) {
                //請求成功
                //判斷狀態碼---errCode狀態根據后端定義來判斷
                if (res.data.errCode == 0) {
                    resolve(res);
                } else {
                    //其他異常
                    reject('運行時錯誤,請稍后再試');
                }
            },
            fail(err) {
                //請求失敗
                reject(err)
            }
        })
    })
}

已經等封裝完成,那么該如何使用呢?

1.在小程序util文件夾下新建api.js,并將上述代碼放進去
然后創建請求,并導出

//銜接上面代碼


const API = {
    getOpenid: (data) => request(GET, `jsapi/mini?jsCode=${data}`),
};
module.exports = {
    API: API
}

2.這里我么以獲取openid接口為例
在.js文件里引入api.js下的API

const $api = require('../../utils/api.js').API;
Page({
    data: {},
    onLoad: function (options) {
        wx.login({
            success:res=> {
                // 調用接口獲取openid
                $api.getOpenid(res.code)
                    .then(res => {
                       //請求成功
                    })
                    .catch(err => {
                       //請求失敗
                    })
            }
        })
    }
})