小程序中的请求封装

数据请求

小程序和其他的框架一样，也会涉及的数据请求。最基本的做法，是在生命周期或者其他的事件方法里面使用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);
            }
        })
    },
})