###1. 後端配置 新建一個CrosConfig.java文件（配置類），允許任意請求發送 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Confi ...
1 axios的理解和使用
1.1 axios是什麼
- 前端最流行的ajax請求庫
- react/vue官方都推薦使用axios發ajax請求
- 文檔地址
1.2 axios特點
- 基於xhr+promise 的非同步ajax請求
- 瀏覽器端/node 端都可以使用
- 支持 請求/響應 攔截器
- 支持請求取消
- 請求/響應 數據轉換
- 批量發送多個請求
1.3 axios常用語法
- axios(config):通用/最本質的發送任意類型請求的方式
axios({
method:'',
url:'',
data:''
})
- axios(url[,config]):可以只指定url發get請求
axios('',{})
- axios.request(config):等同於axios(config)
- axios.get(url,[,config]):發get請求
axios.get('',{})
- axios.delete(url,[,config]):發delete請求
axios.delete({
url:''
params:{}
})
- axios.post(url[,data[,config]]):發post請求
axios.post('',{},{})
- axios.put(url[,data[,config]]):發put請求
axios.put('',{},{})
- axios.default.xxx: 請求的預設全局配置
axios.defaults.method = 'GET';//設置預設的請求類型為 GET
axios.defaults.baseURL = 'http://localhost:3000';//設置基礎 URL
axios.defaults.params = {id:100};
axios.defaults.timeout = 3000;
- axios.interceptors.request.use():添加請求攔截器
axios.interceptors.request.use(function (config) {
console.log('請求攔截器 成功 - 1號');
//修改 config 中的參數
config.params = {a:100};
return config;
}, function (error) {
console.log('請求攔截器 失敗 - 1號');
return Promise.reject(error);
});
- axios.interceptors.response.use(): 添加響應攔截器
axios.interceptors.response.use(function (response) {
console.log('響應攔截器 成功 1號');
return response.data;
}, function (error) {
console.log('響應攔截器 失敗 1號')
return Promise.reject(error);
});
1.4 難點語法的理解和使用
1.4.1. axios.create(config)
- 根據指定配置創建一個新的 axios, 也就就每個新 axios 都有自己的配置
- 新 axios 只是沒有取消請求和批量發請求的方法, 其它所有語法都是一致的
- 為什麼要設計這個語法?
- 需求:項目中有部分介面需要的配置與另一部分介面需要的配置不太一樣, 如何處理
- 解決: 創建2個新axios, 每個都有自己特有的配置, 分別應用到不同要求的介面請求中
1.4.2 攔截器函數/ajax 請求/請求的回調函數的調用順序
- 說明: 調用 axios()並不是立即發送 ajax 請求, 而是需要經歷一個較長的流程
- 流程: 請求攔截器2 => 請求攔截器1 => 發ajax請求 => 響應攔截器1 => 響應攔截器 2 => 請求的回調
- 註意: 此流程是通過 promise 串連起來的, 請求攔截器傳遞的是 config, 響應攔截器傳遞的是 response
