微信小程序——异步请求使用async/await实现同步-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序——异步请求使用async/await实现同步。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在小程序的开发中，我们知道网络请求wx.requset是一个异步请求的API，当我们使用它时，会出现请求还没有结束，我们下面写的处理数据的代码就已经执行了从而导致了我们写的程序出现问题，那么我们该怎么解决这个问题呢？今天我们用async/await来实现一下吧。

在小程序中，我们的async/await要与promise一起搭配使用才能有异步变同步的效果。

一、封装promise的请求

request.js

function post(url, data = {}) {
  return new Promise(function (resolve, reject) {
    wx.request({
      method: "POST",
      url: url,
      data: data,
      success(res) {
        resolve(res);
      },
      fail(err) {
        reject(err)
      }
    })
  })
}
module.exports = {
  post:post
}

我们这里封装的是一个post请求的promise工具类，当然get请求也是一样的封装方法，可以根据具体的使用情况对本代码进行一些更改。

这里我们封装的工具类需要传递的信息是网络请求链接和需要给到接口的请求数据。

二、封装储存接口的工具类

此工具类是为了方便开发者对接口的链接进行统一管理

link.js

module.exports = {
  test: 'your link'
}

在使用时只需要将此工具类引入，然后拿到对应接口的名字即可。

三、使用方法

const request = require('../../utils/request.js')
const url = require('../../utils/link.js')
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  async abc() {
    const { data: res } = await request.post(url.test, data)
    console.log(res);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.abc();
  },
})

在此处我们引入两个工具类之后，在函数abc就可以使用网络请求的异步变同步了，只需要在请求request之前给上一个await，在函数之前给上一个async就可以实现异步请求变同步请求了，这里的console.log()是在请求返回数据之后才会进行打印操作的，这里我们也使用了解构赋值，将拿到的数据里面data的数据重新命名为res返回给开发者，这也是一个小tip！