1.axios通路流程
axios發送請求→axios請求攔截器→伺服器→axios響應攔截器→then方法處理響應結果
2.使用代碼講解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<button>點選擷取資料</button>
<script>
const btn0 = document.getElementsByTagName("button")[0];
//設定請求攔截器
axios.interceptors.request.use(
function (config) {
console.log("請求攔截器 成功1");
return config;
},
function (error) {
console.log("請求攔截器 失敗1");
return Promise.reject(error);
}
);
axios.interceptors.request.use(
function (config) {
console.log("請求攔截器 成功2");
return config;
},
function (error) {
console.log("請求攔截器 失敗2");
return Promise.reject(error);
}
);
//設定響應攔截器
axios.interceptors.response.use(
function (response) {
console.log("響應攔截器 成功1");
return response;
},
function (error) {
console.log("響應攔截器 失敗1");
return Promise.reject(error);
}
);
axios.interceptors.response.use(
function (response) {
console.log("響應攔截器 成功2");
return response;
},
function (error) {
console.log("響應攔截器 失敗2");
return Promise.reject(error);
}
);
axios({ method: "GET", url: "http://localhost:3000/posts" }).then(
(response) => {
console.log(response);
}
);
</script>
</body>
</html>
-
請求攔截器用兩個方法作為參數，若果沒有錯誤，則運作第一個方法，如果中途抛出錯誤則運作第二個方法。
（1）請求攔截器第一個方法參數是config，用于處理請求的配置。
（2）請求攔截器第二個方法參數是error，用于處理報錯資訊。
-
響應攔截器也用兩個方法作為參數，如果沒有錯誤，則運作第一個方法，如果中途抛出錯誤則運作第二個方法。
（1）響應攔截器第一個方法參數是response，用于處理響應結果，起傳回結果作為axios的then方法的response回調參數。
（2）響應攔截器第二個方法參數是error，用于處理報錯資訊
- 如果有多個請求攔截器和響應攔截器，則請求攔截器運作順序為從後面至前面，響應攔截器運作順序為從前面到後面。
- 運作結果：
axios（5）——請求攔截器和響應攔截器1.axios通路流程2.使用代碼講解
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)