zoukankan      html  css  js  c++  java
  • axios中的this指向问题

    最近在使用vue过程中,使用axios进行接口请求,确发现取不到值,返回为undefined。

    show (item) {
       let searchText = item.keyword
      console.log(this)              // 返回vue实例 axios.get(
    'http://localhost:3000/search/multimatch?keywords=' + searchText, {}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})   .then(function(res) {   console.log(this)          // undefined if (res.data.code == 200) {   this.artistData = res.data.result.artist[0]   this.albumData = res.data.result.album[0] } }) .catch((err) => { console.log(err) })
    }

    在vue中,this都指向vue,然而在axios中,this却指向axios,因此需要使用箭头函数,不进行this的绑定

    show (item) {
       let searchText = item.keyword
      console.log(this)              // 返回vue实例
       axios.get('http://localhost:3000/search/multimatch?keywords=' + searchText, {}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
         .then((res) => {
            console.log(this)          // 返回vue实例
             if (res.data.code == 200) {
               this.artistData = res.data.result.artist[0]
               this.albumData  = res.data.result.album[0]
             }
           })
           .catch((err) => {
               console.log(err)
           })
    }
    或者将this的值赋给内部变量
    show (item) {
       let searchText = item.keyword
      console.log(this)              // 返回vue实例
      let that = this; axios.get('http://localhost:3000/search/multimatch?keywords=' + searchText, {}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})   .then((res) => {   console.log(that)          // 返回vue实例 if (res.data.code == 200) {   this.artistData = res.data.result.artist[0]   this.albumData = res.data.result.album[0] } }) .catch((err) => { console.log(err) }) }
     
  • 相关阅读:
    C/C++中的abort、atexit、exit和_Exit
    从QQ聊天看交流的有效性
    HDU 1711 Number Sequence (KMP)
    pintos操作系统thread部分的实现
    搜狗面试的经典题(C++map按值排序,class struct的差别)
    SQL学习之使用order by 依照指定顺序排序或自己定义顺序排序
    选中多个或全中订单逻辑
    HDU 4415 Assassin's Creed(贪心)
    ashx文件中使用session提示“未将对象引用设置到对象的实例”
    .NET运行机制
  • 原文地址:https://www.cnblogs.com/sk-3/p/9004051.html
Copyright © 2011-2022 走看看