目錄
✿ 更詳細的可以看官網:Axios 中文檔案 | Axios 中文網
(1) 全域性設定: 公共屬性的抽取與設定(常見的全域性設定)
ES6中的非同步程式設計的一種解決方案。Promise鏈式呼叫,使用promise類封裝非同步請求:
//鏈式程式設計
new Promise((resolve, reject) => {
//第一次網路請求
setTimeout(() => {
//resolve將拿到的引數傳遞給then處理
resolve('hello');
//reject('err err err');
},1000);
}).then((data) => {
//第一次網路請求後的處理
console.log(data);
}).catch(err => {
console.log(err);
});
//當然:then 其實可以既處理成功時的請求,也可以處理失敗時的捕獲異常
Axios 是一個基於 Promise 的 HTTP 庫(網路請求庫),可以作用於瀏覽器和 node.js 。
npm install axios
(1)傳送請求
(2) axios建立範例
(3) axios攔截器的使用
例如:
axios.defaults.baseURL = ‘123.207.32.32:8000’
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
//建立 axios 範例,並進行一些基本的設定
const instance1 = axios.create({
//基本設定
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// axios 範例(範例中設定url等引數)進行基本的網路請求1
instance1({
url: '/home/multidata'
}).then(res => {
console.log(res);
})
// axios 範例(範例中設定url等引數)進行基本的網路請求2
instance1({
url: '/home/data',
params: {
type: 'sell',
page: 3
}
}).then(res => {
console.log(res);
})
使用第三方的東西,記得對它進行一層封裝(好處就是日後預防第三方的東西不再維護時,維護替換比較容易)
import axios from 'axios'
export function request(config) {
// 1.建立axios的範例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// 2.axios的攔截器
// 2.1.請求攔截的作用
instance.interceptors.request.use(config => {
// console.log(config);
// 1.比如config中的一些資訊不符合伺服器的要求
// 2.比如每次傳送網路請求時, 都希望在介面中顯示一個請求的圖示
// 3.某些網路請求(比如登入(token)), 必須攜帶一些特殊的資訊
return config
}, err => {
// console.log(err);
})
// 2.2.響應攔截
instance.interceptors.response.use(res => {
// console.log(res);
return res.data
}, err => {
console.log(err);
})
// 3.傳送真正的網路請求
return instance(config)
}
等等