js的axios中遇到的this故障解决

Vue中Axios请求与数据绑定

原创已于 2022-02-21 00:48:22 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2022-01-24 23:35:24 首次发布

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Axios发起HTTP请求并正确处理响应数据。通过对比箭头函数与普通函数的不同用法，展示了如何将获取到的数据绑定到组件上，并给出了正确的实现方式。

博文背景

{{ message }}

this.axios.get(‘xxx’).then(response=>(this.message=response.data))后面接箭头函数可以返回结果但是直接改成普通函数不可以返回结果

解决办法

<template>
  <div id="app">
<!--    <img alt="Vue logo" src="./assets/logo.png">-->
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <pre>{{ info }}</pre>

  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

// import axios from "axios";

export default {
  name: 'App',
  // components: {
    // HelloWorld
  // },
  // data() {
  //   return {
  //     message: "hello world"
  //   }
  // }
  // data: function() {
  //   return {
  //     message: "hello world"
  //   }
  // }
  data() {
    return {
      info: "waiting for api requesting"
    }
  },
  // async mounted() {
  //   await this.axios.get('https://httpbin.org/get').then(response => JSON.stringify(this.info = response.data, null, 4))
  // }

  // 错误
  async mounted() {
    await this.axios.get('https://httpbin.org/get').then(function(response) {
      console.log(response.data);
      console.log(typeof(response.data))
      return Promise.resolve(this.info=response.data["url"]);
    })
  }
}
  // 正确
  async mounted() {
    let that=this;
    await this.axios.get('https://httpbin.org/get').then(function(response) {
      console.log(response.data);
      console.log(typeof(response.data))
      return Promise.resolve(that.info=response.data["url"]);
    })
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-size: 18px;
  /*-moz-osx-font-smoothing: grayscale;*/
  /*text-align: center;*/
  color: #2c3e50;
  /*margin-top: 60px;*/
}
</style>