微信小程序学习笔记二（持续更新）---小程序网络请求封装

写小程序的你是否已经厌倦了发送网络请求的wx.request？接着看吧。。。

一、目录结构

在项目同级目录下utils文件夹里新建一个fetch.js文件，(名字看自己喜好)

二、直接上代码

// 定义网络请求API地址
const baseURL = 'http://yourbaseURL'
// 封装网络请求开始
const http = ({ url, data, method, ...other } = {}) => {
  let sessionKey = wx.getStorageSync('token') // 以同步方式获取token避免异步操作出现延迟错误，具体可根据自己项目情况而定
  // 我这里需要在除了登录后的所有接口拼接token，因此判断了url是否为登录接口由此添加不同的url拼接方式，具体可根据业务逻辑完善代码
  var requestUrl = ''
  if (url === '/login/wxLogin') {
    requestUrl = baseURL + url
  } else {
    requestUrl = baseURL + url + "?sessionKey=" + sessionKey
  }
  // 添加请求加载等待
  wx.showLoading({
    title: '加载中...'
  })
  // Promise封装处理
  return new Promise((resolve, reject) => {
    wx.request({
      // 请求地址拼接
      url: requestUrl,
      data: data,
      // 获取请求头配置
      header: { 'content-type': 'application/x-www-form-urlencoded' }, 
      method: method,
      ...other,
      // 成功或失败处理
      complete: (res) => {
        // 关闭等待
        wx.hideLoading()
        console.log(res)
        // // 进行状态码判断并处理，退出登录
        if (res.data.code === 8888) {
          wx.navigateTo({
            url: '/pages/login/login',
          })
        } else if (res.data.code !== 0) {
          // 获取后台返回报错信息
          let title = res.data.msg
          // 调用全局toast方法
          showToast(title)
        } else if (res.data.code === 0) {
          resolve(res)
        } else {
          reject(res)
        }
      }
    })
  })
}
// 添加请求toast提示
const showToast = title => {
  wx.showToast({
    title: title,
    icon: 'none',
    duration: 1500,
    mask: true
  });
}

// 进行url字符串拼接
const getUrl = url => {
  if (url.indexOf('://') == -1) {
    url = baseURL + url
  }
  return url
}

// 重构请求方式
const _fetch = (content) => {
  return http({
    url: content.url,
    data: content.data,
    method: content.method
  })
}
module.exports = {
  baseURL,
  _fetch,
  showToast
}

三、使用：

1、文件最上面引入：

let api = require('../../utils/fetch.js')

2、使用

api._fetch({
	url: '/yourURL',
	data: {yourData},
	method: 'get/post....'
}).then((res) => {
	// 请求成功后的处理
	console.log(res.data)
	......
})

注意
1、promise为异步请求，在fetch.js中使用wx.getStorage获取token时，会比请求慢一步，因此会出现所取的token值有问题。小程序中在使用promise时使用同步的方式获取token--**wx.getStorageSync('token') **
2、大多数业务并非选择url拼接token的方式发送请求，而是将token存入header中一并带入，示例 点击这里