微信小程序 wx.request方法的异步封装实例详解

下面是关于“微信小程序 wx.request方法的异步封装实例详解”的攻略：

前言

在进行微信小程序开发时，我们经常会用到wx.request()方法发起网络请求，但是该方法是异步的，这就需要我们充分掌握异步编程的知识。本文将结合两个示例详细讲解wx.request()方法的异步封装实例。

示例一

首先介绍一个简单的异步封装实例，来发起一个get请求：

const request = (url, data = {}, method = 'GET') => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      method,
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        resolve(res.data)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

// 使用方法
request('https://example.com/api/users')
  .then((data) => {
    console.log(data)
  })
  .catch((err) => {
    console.log(err)
  })

该示例中，我们定义了一个request方法，传入三个参数，url、data和method，并返回一个promise对象。在内部，使用wx.request方法发起网络请求，成功后调用resolve方法，失败后调用reject方法。使用该方法时只需要传入url即可。

示例二

接下来，我们来看一个稍微复杂一些的异步封装实例，来发起一个post请求，并上传文件：

const postData = (url, formData) => {
  return new Promise((resolve, reject) => {
    wx.uploadFile({
      url,
      filePath: formData.filePath,
      name: 'file',
      formData: formData,
      success: (res) => {
        resolve(res.data)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

const request = (url, data = {}, method = 'GET') => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      method,
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        resolve(res.data)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

const postWithFile = (url, data, filePathKey) => {
  let formData = {
    filePath: data[filePathKey],
    otherData1: data.other1,
    otherData2: data.other2
  }
  return new Promise((resolve, reject) => {
    postData(url, formData)
      .then((res) => {
        resolve(res)
      })
      .catch((err) => {
        reject(err)
      })
  })
}

// 使用方法
let requestData = {
  file: 'xxx',
  other1: 'xxx',
  other2: 'xxx'
}
postWithFile('https://example.com/api/upload', requestData, 'file')
  .then((data) => {
    console.log(data)
  })
  .catch((err) => {
    console.log(err)
  })

该示例中，我们定义了三个方法，分别为postData、request和postWithFile。其中，postData方法用于上传文件，request方法用于发起普通的get和post请求，而postWithFile则是在postData的基础上进行的封装，用于上传带附加数据的文件。

使用该方法时需要传入url、data和filePathKey三个参数，其中data表示上传文件的相关数据，filePathKey表示文件在data中的key。上传文件需要调用postData方法，返回一个promise对象，而postWithFile仅是将postData进行了封装，返回一个promise对象。最终使用时，只要调用postWithFile方法即可。