唐抉的个人博客

Vue axios接口异步请求数据并同步返回

字数统计: 315阅读时长: 1 min
2023/10/16

在实际项目开发中,经常要使用axios来请求数据。

axios可以通过async/await来实现同步请求。

其中async用来修饰方法,其声明的方法为异步请求的方法,await只能在异步方法中使用,用于等待指定方法执行完成;await修饰的方法执行完成后,才会执行后续的代码。

axios.then模块前把this赋值给一个变量并在.then中代替this来使用,可以防止this指针发生变化导致引用全局变量无效的问题,如:

  • ``json getData() { var _this=this axios.get(https://tangmenjue.top`) .then(res => { _this.data = res.data }) },

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    下面将介绍使用**`axios`异步请求数据不同步返回**时的处理方法:

    - 定义`getData`方法来发送axois请求,将请求返回值赋值给`this.data`,其中:使用`async`修饰`getData`方法,使用`await`修饰`axios`方法:

    ```json
    async getData() {
    var _this=this
    await axios.get(`https://tangmenjue.top`)
    .then(res => {
    _this.data = res.data
    })
    },

  • 定义调用getData的方法handleData,其中:使用async修饰handleData方法,使用await修饰调用的this.getData方法::

    1
    2
    3
    async handleData() {      
    await this.getData()
    }

  • 根据上述步骤即可实现将axios请求的数据同步传递给全局变量this.data

CATALOG