微信小程序 wx-request封装 + 全局使用

针对3点问题对wx-request进行简单封装
1、网络请求都写在Page里，每个请求都要重复的写wx.request以及一些基础配置
2、每个页面里都要处理相同类型的异常
3、后端返的http status code为200以外时，并不能直接进入fail对应函数进行处理

首先我们在 app.js内配置 host 域名

App({
  globalData: {
    houst: https://www.baidu.com
  }
})

在项目utils文件夹内新建 request.js 文件，并进行配置

const app = getApp()

const request = (url, options) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: app ? app.globalData.host, //域名接口地址
      method: options.method, //配置method方法
      data: options.method === 'GET' ? options.data : JSON.stringify(options.data), //如果是GET,GET自动让数据成为query String,其他方法需要让options.data转化为字符串
      header: {
        'Content-Type': 'application/json; charset=UTF-8',
      }, //header中可以添加token值等
      success(request) { //监听成功后的操作
        if (request.statusCode === 200) {
          resolve(request.data)
        } else {
          reject(request.data)
        }
      },
      fail(error) {  //返回失败也同样传入reject()方法
        reject(error.data)
      }
    })
  })
}

//封装get方法
const get = (url, options = {}) => {
  return request(url, {
    method: 'GET',
    data: options
  })
}

//封装post方法
const post = (url, options = {}) => {
  return request(url, {
    method: 'POST',
    data: options
  })
}

//封装put方法
const put = (url, options) => {
  return request(url, {
    method: 'PUT',
    data: options
  })
}
//封装remove方法，DELETE关键字不能声明
const remove = (url, options = {}) => {
  return request(url, {
    method: 'DELETE',
    data: options
  })
}

module.exports = {
  get,
  post,
  put,
  remove
}

在 app.js 中引用声明 request.js 来做到全局使用

import $http from '/utils/request.js'

App({
  //request请求
  $http
})

页面内实现请求 index.js

const app = getApp()
Page({
  onLoad(options){
    const that = this,
          data = {
            tel: 18666666666,
            name: '中国联通'
          };
    app.$http.get('/api/tel', data).then(res =>{
      that.setData({
        index: res.data
      })
    })
  }
})

最后编辑于：2019.11.04 15:43:32