2.5.3小节习题、关键字添加

data/2.Vue中阶/5.Axios/3.拦截器、取消请求/config.json

+{
+  "node_id": "vue-f9bf772e800842deb661d5417adfdf43",
+  "keywords": [
+    "请求拦截器",
+    "axios拦截器",
+    "取消请求",
+    "响应拦截器"
+  ],
+  "children": [],
+  "export": [
+    "exercises.json"
+  ],
+  "keywords_must": [
+    "axios"
+  ],
+  "keywords_forbid": []
+}
\ No newline at end of file

data/2.Vue中阶/5.Axios/3.拦截器、取消请求/exercises.json

+{
+  "type": "code_options",
+  "author": null,
+  "source": "exercises.md",
+  "notebook_enable": false,
+  "exercise_id": "00e895ceea48452ab5656bbf216f738b"
+}
\ No newline at end of file

data/2.Vue中阶/5.Axios/3.拦截器、取消请求/exercises.md

+# 拦截器、取消请求
+
+ <div style="color: pink;font-size:22px;font-weight:700">小常识：</div>
+<br>
+
+在请求或响应被 then 或 catch 处理前拦截它们。
+
+```javascript
+// 添加请求拦截器
+axios.interceptors.request.use(function (config) {
+    // 在发送请求之前做些什么
+    return config;
+  }, function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  });
+```
+
+```javascript
+// 添加响应拦截器
+axios.interceptors.response.use(function (response) {
+    // 对响应数据做点什么
+    return response;
+  }, function (error) {
+    // 对响应错误做点什么
+    return Promise.reject(error);
+  });
+```
+
+如果你想在稍后移除拦截器，可以这样：
+
+```javascript
+const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
+axios.interceptors.request.eject(myInterceptor);
+```
+
+可以为自定义 axios 实例添加拦截器
+
+```javascript
+const instance = axios.create();
+instance.interceptors.request.use(function () {/*...*/});
+```
+
+错误处理
+
+```javascript
+axios.get('/user/12345')
+  .catch(function (error) {
+    if (error.response) {
+      // The request was made and the server responded with a status code
+      // that falls out of the range of 2xx
+      console.log(error.response.data);
+      console.log(error.response.status);
+      console.log(error.response.headers);
+    } else if (error.request) {
+      // The request was made but no response was received
+      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+      // http.ClientRequest in node.js
+      console.log(error.request);
+    } else {
+      // Something happened in setting up the request that triggered an Error
+      console.log('Error', error.message);
+    }
+    console.log(error.config);
+  });
+```
+
+也可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。
+
+```javascript
+axios.get('/user/12345', {
+  validateStatus: function (status) {
+    return status < 500; // Reject only if the status code is greater than or equal to 500
+  }
+})
+```
+
+**取消**
+使用 cancel token 取消请求
+
+> Axios 的 cancel token API 基于cancelable promises proposal，它还处于第一阶段。
+
+可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：
+
+```javascript
+const CancelToken = axios.CancelToken;
+const source = CancelToken.source();
+
+axios.get('/user/12345', {
+  cancelToken: source.token
+}).catch(function(thrown) {
+  if (axios.isCancel(thrown)) {
+    console.log('Request canceled', thrown.message);
+  } else {
+     // 处理错误
+  }
+});
+
+axios.post('/user/12345', {
+  name: 'new name'
+}, {
+  cancelToken: source.token
+})
+
+// 取消请求（message 参数是可选的）
+source.cancel('Operation canceled by the user.');
+```
+
+还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：
+
+```javascript
+const CancelToken = axios.CancelToken;
+let cancel;
+
+axios.get('/user/12345', {
+  cancelToken: new CancelToken(function executor(c) {
+    // executor 函数接收一个 cancel 函数作为参数
+    cancel = c;
+  })
+});
+
+// cancel the request
+cancel();
+```
+
+注意: 可以使用同一个 cancel token 取消多个请求
+
+<br>
+
+ <div style="color: #8E7CC3;font-size:22px;font-weight:700">小测试：</div>
+
+如何中断axios的请求?<br/><br/>
+
+## 答案
+
+axios.CancelToken()
+
+## 选项
+
+### A
+
+axios.Cancel()
+
+### B
+
+axios.create()
+
+### C
+axios.Destroy()
+