小程序中的請求封裝

數據請求

小程序和其他的框架一樣，也會涉及的數據請求。最基本的做法，是在生命周期或者其他的事件方法里面使用wx.request就可以了，如下所示：

onLoad: function (options) {
      wx.request({
        url: 'http://bl.7yue.pro/v1/classic/latest',
        header:{
          appkey:"JieympC4hVYHYYtm"
        },
        success:(res)=> {
             this.setData({
                 test:res.data
             });
             console.log(this.data.test);
          }
      })
  },

這樣就可以獲取到數據了，但是存在兩個問題：url地址前綴和appkey。首先是url前綴，我們知道，一個程序中，肯定不止一個接口，當我們使用上面的寫法是，如果后期需要更換地址前綴，就需要找到所有的請求，然后逐個更改，顯然是很麻煩的；然后是appkey，和token的作用差不多，幾乎所有的請求里面都需要用到，這樣寫也會很麻煩，所有需要進行優化。

全局變量

首先在項目根目錄下面新建config.js，用於存放地址前綴和appkey全局變量。

const config = {
  api_base_url:"http://bl.7yue.pro/v1/",
  appkey:"JieympC4hVYHYYtm"
}

既然定義了全局變量，就需要在使用的地方進行引入，但我們這里並是不直接在寫數據請求的頁面進行引入，而是在項目根目錄下新建util文件夾，然后在該文件夾下面新建http.js，然后在這里頁面進行引用，因為后面還在這個文件中對數據請求進行進一步的封裝。

在引入前，首先需要在config.js中進行暴露：

export const config = {
  api_base_url:"http://bl.7yue.pro/v1/",
  appkey:"JieympC4hVYHYYtm"
}

然后在http.js中進行引入：

import {config} from '../config.js'

因為我們在定義變量的時候的命名為config，那么在引入和使用時就應該保持一致，如果需要換成其他的名稱，就需要在http.js中進行引入是，使用as來定義一個別名：

import {config as conf1} from '../config.js'

這樣，我們在使用的時候就是conf1.appkey了。

上面這種情況是建立在config.js里面只有一個變量的情況下，那么如果有兩個變量需要暴露，按照上面這種寫法的話，就是這樣的了：

config.js

 export const config = {
  api_base_url:"http://bl.7yue.pro/v1/",
  appkey:"JieympC4hVYHYYtm"
}

export let fun = function(){}

http.js

import { config, fun} from '../config.js'

但是呢，我們也可以使用下面這種寫法：

const config = {
  api_base_url:"http://bl.7yue.pro/v1/",
  appkey:"JieympC4hVYHYYtm"
}

let fun = function(){}
export { config, fun}

 請求封裝

在上面的步驟中，我們已經將每個接口都需要使用的請求前綴和appkey進行了提取，然后在http.js中繼續進行封裝就可以了。

http.js

import {config } from '../config.js'

class HTTP {
    request(params) {
        wx.request({
            url: config.api_base_url + params.url,
            header: {
                'content-type': 'application/json',
                'appkey': config.appkey
            },
            data: params.data,
            method: params.method,
            success: function (res) {
                // 判斷以2（2xx)開頭的狀態碼為正確
                // 異常不要返回到回調中，就在request中處理，記錄日志並showToast一個統一的錯誤即可
                var code = res.statusCode.toString();
                var startChar = code.charAt(0);
                if (startChar == '2') {
                    params.success && params.success(res.data);
                } else {
                    params.error && params.error(res);
                }
            },
            fail: function (err) {
                params.fail && params.fail(err)
            }
        })
    }
}
export { HTTP };

然后在需要進行數據請求的頁面中進行引入使用就可以了

classic.js

import {HTTP} from '../../util/http.js' let http = new HTTP()

Page({
    data: {
        test: {}
    },
    onLoad: function(options) {
        http.request({ url: 'classic/latest', method: 'get', success: (res) => { this.setData({ test: res }) console.log(this.data.test); } })
    },
})