Skip to content

在回调函数中访问“正确”的 this #80

@Dream4ever

Description

@Dream4ever

需求描述

Vue 的 methods 中调用了 axios 来向后端发送/请求数据,如何在 axios 的回调中访问 Vue 实例的数据(data)?

方案调研

用关键词 how to vue instance inside axios callback 进行 Google,第一个链接就是 Stack Overflow 上的提问,质量应该很高。
提问的网址:javascript - Accessing VUE JS's data from Axios - Stack Overflow
点进去看,第一个最高票回答给出了在 axios 回调中访问 Vue 实例数据的三种方法:

方案一

创建对 Vue 实例的引用,比如 var self = this,然后在回调中访问。

知识点:以前经常见到 var self = this 的写法,一直不明白有什么用,这次遇到作用域的问题了,终于有点理解了。

方案二

回调函数写成箭头函数,就能直接在回调中访问 Vue 实例了。

知识点:又想起来在一些地方要求不能用箭头函数,也是跟作用域有关,看来需要注意箭头函数的作用域问题。

相关链接:Arrow functions - JavaScript | MDN

方案三

将 axios 用 bind 方法绑定到 Vue 实例上,axios.get().then().bind(this)。

知识点:以前读犀牛书看到 bind 方法,没有多深的体会,现在知道还可以这样用,涨姿势了。

相关链接:Function.prototype.bind() - JavaScript | MDN

拓展阅读

Metadata

Metadata

Assignees

No one assigned

    Labels

    JSJavascript

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions