【VUE】this 作用域问题导致 $message 提示窗、loading 展示隐藏失效

夏目佑希

已于 2022-02-22 19:39:16 修改

阅读量3.1k

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript

于 2022-02-22 19:33:07 首次发布

本文链接：https://blog.csdn.net/sy12321/article/details/123075048

版权

在Vue.js前端开发中，遇到axios请求后this.$message和this.loading功能失效的问题。通过分析发现，作用域变化导致报错。首先尝试通过Vue.prototype.$message修复问题1，但未解决根本。然后，采用.then((response) => {})箭头函数保持this指向，成功修复问题。最后，学习使用async/await进行异步请求，优化代码结构，实现了更优雅的解决方案。

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

问题

在编写前端功能时发现两个问题，由于要发送post json格式内容，修改了 axios 发送请求的脚本，导致在使用 Message 提示框，和 Loading 加载功能时，作用域出现了问题

第一版代码

export default {
   
	data() {
   
	    return {
   
	      data_1: '',
	      data_2: '',
	      loading: false
	    }
	  },
	methods: {
   
	    addBtn() {
   
	      this.loading = true
	      var params = {
   
	        'data_1': this.data_1,
	        'data_2': this.data_2
	      }
	      axios.post('url', {
   
	        jsonData: JSON.stringify(params)
	      })
	      .then(function(response){
   
	        i