vue axios里的值取不到？——箭头立即执行函数解决axios异步问题

最新推荐文章于 2023-12-07 09:50:07 发布

三火Sunfire

最新推荐文章于 2023-12-07 09:50:07 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/u012914342/article/details/115363346

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文介绍了在JavaScript中遇到axios异步操作导致值无法正确获取的问题，通过分析一个具体的例子展示了如何使用箭头立即执行函数来确保axios请求完成后再进行后续操作。总结了解决此类问题的关键在于理解异步执行顺序，并应用正确的异步处理技巧。

摘要由CSDN通过智能技术生成

刚入职那会，经常因为取不出来值去问师傅，其中大多数情况都是因为axios的值取不出来。总结之后发现，除了改变执行顺序之外，还可以通过箭头立即执行函数解决这个问题

首先我们来猜一下这种情况，打印的会是什么？

method () {
    this.text = ''
    axios请求.then(res => {this.text = '三火Sunfire'})
    if (this.text === '') {
        console.log('啥也没有呀')
    } else if {
        console.log('三火Sunfire')
    }
}

答案：啥也没有呀

因为axios是异步的，this.text = ''后会跳过它直接执行后面的函数，导致axios里的值取不到

解决方法：箭头立即执行函数

method () {
    this.text = ''
    // this指向，也可以通过val值来传递参数
    const self = this
    // 箭头立即执行函数
    const test = ((val) => {
       return {
           getText () {
               axios请求.then(res => {this.text = '三火Sunfire'})
           }
       }
    })(val)
    test.getText()
    if (this.text === '') {
        console.log('啥也没有呀')
    } else if {
        console.log('三火Sunfire')
    }
}

这样打印出来的就是我们要的值了