[30天 Vue学好学满 DAY26] axios & axios-mock-adapter

前一篇提完透过axios 进行HTTP请求，但前後端分离且分工的状态下，前端工程师为了验证成果需要透过假资料检视渲染後实际情况，axios-mock-adapter，即可做到透过URL拦截API，并进行假资料回传。

安装

// 需先安装 axios 
// axios-mock-adapter
$ npm install axios-mock-adapter --save-dev

实作

为了让元件更贴近实际情况，可将mock相关拉一层往外写(也可直接写於元件中)

新增 `mock.js`

import MockAdapter from 'axios-mock-adapter'
import axios from 'axios'

let mock_adapter = new MockAdapter(axios)

// 回传代办事项清单假资料
// reply: return status
mock_adapter.onGet("https://api.coindesk.com/v1/bpi/currentprice.json").reply(200, {
    todoList: [
        {  id: "1", name: "代办事项A", done: false},
        {  id: "2", name: "代办事项B", done: true}
    ]
})

API 正常回传值:

元件

HTML、Data

// HTML
<li v-for="todo in todoList" :key="todo.id">
  {{ todo.name }}
</li>

// Data
return {
  todoList: [],
};

定义方法: Call API

doGetTodoList: function () {
  return this.$axios.get(
    "https://api.coindesk.com/v1/bpi/currentprice.json"
  );
},

以下踩雷开始
mounted

mounted() {
  var res = this.doGetTodoList();
  this.todoList = res.data.todoList;
},

错误显示:TypeError: Cannot read properties of undefined (reading 'todoList')

把res log出来检查出现: Promise {<pending>}

错误原因:
爬文後发现，在非同步处理中，这表示这笔Promise尚无回应，也就是显示的pending(等候事件完成)，而在等待过程中即拉出成果进行渲染 -> undefined，所以需要透过then处理，带事件完成後进行下一步赋值。

调整:把 Call API 拉到 mounted

this.$axios
  .get("https://api.coindesk.com/v1/bpi/currentprice.json")
    .then(function (res) {
      this.todoList = res.data.todoList;
});

错误显示:Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'todoList')
刚刚是read 现在是set
把res log出来检查出现:值对了，但set不进去

错误原因:
在axios的then内部无法使用this，因为内部this没有被连结。

解法1:
ES6 箭头函数

.then((res) => {
  this.todoList = res.data.todoList;
});

解法2:
提前定义this(个人不喜欢)

var tempThis = this;
this.$axios
  .get("https://api.coindesk.com/v1/bpi/currentprice.json")
  .then(function (response) {
    var res = response.data;
      tempThis.todoList = res.todoList;
});

终於