小程序中的请求封装

2021年11月25日 阅读数:3
这篇文章主要向大家介绍小程序中的请求封装,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

数据请求

小程序和其余的框架同样,也会涉及的数据请求。最基本的作法,是在生命周期或者其余的事件方法里面使用wx.request就能够了,以下所示:json

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全局变量。api

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

既然定义了全局变量,就须要在使用的地方进行引入,但咱们这里并是不直接在写数据请求的页面进行引入,而是在项目根目录下新建util文件夹,而后在该文件夹下面新建http.js,而后在这里页面进行引用,由于后面还在这个文件中对数据请求进行进一步的封装。app

在引入前,首先须要在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来定义一个别名:this

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

这样,咱们在使用的时候就是conf1.appkey了。url

上面这种状况是创建在config.js里面只有一个变量的状况下,那么若是有两个变量须要暴露,按照上面这种写法的话,就是这样的了:spa

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);
            }
        })
    },
})