【Vue】: 记录一个使用 axios 访问 API 中多层调用API的问题

问题

一般Vue中使用 axios 访问API的过程如下：

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }
})

我们会在.then()中将response.data赋值给data中的info。之后API访问结束，info的数据更新。

但是当response.data中的数据是list，而且对每一个list，需要调用一个新的API来进行相应的数据更新，如下：

new Vue({
  el: '#app',
  data () {
    return {
      info: [],
      other: ""
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
	      this.info = response；
	      this.info.forEach((item) => {
				OtherAPI(item);
		  })
      })
  }
  OtherAPI(item){
	...
	// 注意：这里调用API之后赋值数据，不能另外赋值给this.other ,因为是数组重复调用，会覆盖掉这个值
	// this.other = response.data // 错误的方法
	// 需要实时更新赋值，需要在item上进行新赋值，这样才能保证所有的值被保存
	this.$set(item, 'other', response.data);
  }

})

这里调用API之后赋值数据，不能赋值给this.other ,因为是数组重复调用，会覆盖掉这个值。

解决：

需要实时更新赋值，需要在item上进行新赋值，这样才能保证所有的值被保存。