小程序封装request / 渔人

1月前 阅读 / 128 来源 / 原创 文 / 小酒馆

小程序官方文档的网络请求,wx.request是发起 HTTPS 网络请求的,但是我们每次请求都需要写很多参数,比如URL,请求头,这些,会导致我们...

小程序官方文档的网络请求,wx.request是发起 HTTPS 网络请求的,但是我们每次请求都需要写很多参数,比如URL,请求头,这些,会导致我们的代码量增大,比较不利于请求地址的管理。

这里我们在小程序目录下新建一个js文件

内容如下

// 这里定义的变量,是我们请求地址的前半部分,也就是路径不会发生变化,一般为https://www.xxxx.com/api/
const BASE_URL = ''

// 这里需要传入两个必传参数,url是拼接参数, method是请求方法, 后面的参数视情况而定,data是需要接口传入的参数,header一般是放token的
module.exports = (url, method = "GET", data, header = {}) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + url,
      method,
      data,
      header: {
          
        Authorization: '视情况而传,登录前一般是密钥,登陆后是token,可以使用strogr本地存入,每次请求带上,即可',
        ...header
      },
      // 这里是接收数据格式,看自己需求选择,一般JSON
      dataType: 'json',
      success: res => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject
        }
      },
      fail: reject
    })
  })
}
// 这里是利用的promise封装的小程序网络请求

当然,上面我们只是封装了请求,并没有使用它,我们需要将它挂载在小程序的app对象上,才可以使用

打开app.js

引入我们刚刚创建的文件,将其挂载在app对象上,以便我们合理的调用它

const http = require('utils/http.js')
App({
    http
})

在我们需要调用接口的时候

我们只需要将app对象引入即可

// 这里我们引入app
const app = getApp()

// 调用的时候,我们只需要引用app对象身上的http属性就行,传入参数

getHttp() {
    app.http(
    '请求地址,拼接前面的,注意写后半截即可',
    'get'
    ).then(res => {
        '成功'
    }).catch(e => {
        '失败'
    })
}


58

评论列表
共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~