微信小程序——异步请求使用async/await实现同步

古城微笑少年丶 2023-10-13 21:52 49阅读 0赞

在小程序的开发中，我们知道网络请求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！

## 四、原因 ##

在微信小程序中，网络请求默认使用的是异步的回调方式来处理请求的结果。这是因为在小程序的 JavaScript 运行环境中，不支持直接使用 async/await来处理异步操作。

await关键字需要在异步函数中使用，而网络请求的回调函数并不属于异步函数。因此，如果直接在网络请求的回调函数中使用await，是无法正确得到结果的，因为它会在同步上下文中执行，而不是等待异步操作完成。

为了在微信小程序中使用await来处理网络请求，一种常见的做法是封装网络请求的回调函数为 Promise 对象，并使用 async/await来处理这个 Promise 对象。

## 五、总结 ##

这就是微信小程序里面的请求从异步转换成同步的方法了，这也是我个人在写小程序的时候遇到的问题了，然后查了很多的资料，才整出来了，这就来记录一下了，给各位小伙伴避避坑了，那今天的分享就到这里结束了，我们下期再见咯！![013d39e548d2491fb191c38f738e72dd.jpeg][]

[013d39e548d2491fb191c38f738e72dd.jpeg]: https://img-blog.csdnimg.cn/013d39e548d2491fb191c38f738e72dd.jpeg