From b45c5ea6d6e1e37a92cac095afdce098174762e9 Mon Sep 17 00:00:00 2001 From: zhaoss Date: Thu, 5 May 2022 11:11:48 +0800 Subject: [PATCH] =?UTF-8?q?2.5.3=E5=B0=8F=E8=8A=82=E4=B9=A0=E9=A2=98?= =?UTF-8?q?=E3=80=81=E5=85=B3=E9=94=AE=E5=AD=97=E6=B7=BB=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../config.json" | 17 ++ .../exercises.json" | 7 + .../exercises.md" | 150 ++++++++++++++++++ 3 files changed, 174 insertions(+) create mode 100644 "data/2.Vue\344\270\255\351\230\266/5.Axios/3.\346\213\246\346\210\252\345\231\250\343\200\201\345\217\226\346\266\210\350\257\267\346\261\202/config.json" create mode 100644 "data/2.Vue\344\270\255\351\230\266/5.Axios/3.\346\213\246\346\210\252\345\231\250\343\200\201\345\217\226\346\266\210\350\257\267\346\261\202/exercises.json" create mode 100644 "data/2.Vue\344\270\255\351\230\266/5.Axios/3.\346\213\246\346\210\252\345\231\250\343\200\201\345\217\226\346\266\210\350\257\267\346\261\202/exercises.md" diff --git "a/data/2.Vue\344\270\255\351\230\266/5.Axios/3.\346\213\246\346\210\252\345\231\250\343\200\201\345\217\226\346\266\210\350\257\267\346\261\202/config.json" "b/data/2.Vue\344\270\255\351\230\266/5.Axios/3.\346\213\246\346\210\252\345\231\250\343\200\201\345\217\226\346\266\210\350\257\267\346\261\202/config.json" new file mode 100644 index 0000000..fc5117b --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/5.Axios/3.\346\213\246\346\210\252\345\231\250\343\200\201\345\217\226\346\266\210\350\257\267\346\261\202/config.json" @@ -0,0 +1,17 @@ +{ + "node_id": "vue-f9bf772e800842deb661d5417adfdf43", + "keywords": [ + "请求拦截器", + "axios拦截器", + "取消请求", + "响应拦截器" + ], + "children": [], + "export": [ + "exercises.json" + ], + "keywords_must": [ + "axios" + ], + "keywords_forbid": [] +} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/5.Axios/3.\346\213\246\346\210\252\345\231\250\343\200\201\345\217\226\346\266\210\350\257\267\346\261\202/exercises.json" "b/data/2.Vue\344\270\255\351\230\266/5.Axios/3.\346\213\246\346\210\252\345\231\250\343\200\201\345\217\226\346\266\210\350\257\267\346\261\202/exercises.json" new file mode 100644 index 0000000..76c39e7 --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/5.Axios/3.\346\213\246\346\210\252\345\231\250\343\200\201\345\217\226\346\266\210\350\257\267\346\261\202/exercises.json" @@ -0,0 +1,7 @@ +{ + "type": "code_options", + "author": null, + "source": "exercises.md", + "notebook_enable": false, + "exercise_id": "00e895ceea48452ab5656bbf216f738b" +} \ No newline at end of file diff --git "a/data/2.Vue\344\270\255\351\230\266/5.Axios/3.\346\213\246\346\210\252\345\231\250\343\200\201\345\217\226\346\266\210\350\257\267\346\261\202/exercises.md" "b/data/2.Vue\344\270\255\351\230\266/5.Axios/3.\346\213\246\346\210\252\345\231\250\343\200\201\345\217\226\346\266\210\350\257\267\346\261\202/exercises.md" new file mode 100644 index 0000000..b7a2677 --- /dev/null +++ "b/data/2.Vue\344\270\255\351\230\266/5.Axios/3.\346\213\246\346\210\252\345\231\250\343\200\201\345\217\226\346\266\210\350\257\267\346\261\202/exercises.md" @@ -0,0 +1,150 @@ +# 拦截器、取消请求 + +
小常识：
+
+ +在请求或响应被 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 取消多个请求 + +
+ +
小测试：
+ +如何中断axios的请求?

+ +## 答案 + +axios.CancelToken() + +## 选项 + +### A + +axios.Cancel() + +### B + +axios.create() + +### C +axios.Destroy() + -- GitLab