post請求的時候,我們需要加上一個請求頭,所以可以在這里進行一個默認的設置,即設置post的請求頭為
~~~
axios.defaults.headers.post\['Content-Type'\] = 'application/x-www-form-urlencoded;charset=UTF-8';
~~~
一般項目中 有2種格式,json格式和formData格式,在項目中我們可以直接傳遞json對象,axios源碼會自動幫我們處理成json字符串的形式
如果是表單請求, 需要傳formData的格式, 有2種方式
~~~
方式一:
var formdata=new FormData();//可以通過append()方法來追加數據
formdata.append("name","laotie");//通過get方法對值進行讀取
console.log(formdata.get("name"));//laotie//通過set方法對值進行設置
formdata.set("name","laoliu");
console.log(formdata.get("name"));//laoliu
方式二:qs
json數據類型:application/json;charset=UTF-8
FormData:application/x-www-form-urlencoded;charset=UTF-8
~~~
目錄的`src`文件夾下新建`providers`文件夾,在該文件夾內新建`axios.js`文件,內容如下代碼塊:
~~~
import axios from 'axios';
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'http://www.baidu.com' //填寫域名
//http request 攔截器
axios.interceptors.request.use(
config => {
config.headers = {
'Authorization': localStorage.getItem('token'),
'version': '1.0',
'Content-Type': 'application/json;charset=UTF-8'
}
return config;
},
error => {
return Promise.reject(err);
}
);
//響應攔截器即異常處理
axios.interceptors.response.use(response => {
// 如果返回的狀態碼為200,說明接口請求成功,可以正常拿到數據
// 否則的話拋出錯誤
return response
}, err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
console.log('錯誤請求')
break;
case 401:
console.log('未授權,請重新登錄')
break;
case 403:
console.log('拒絕訪問')
break;
case 404:
console.log('請求錯誤,未找到該資源')
break;
case 405:
console.log('請求方法未允許')
break;
case 408:
console.log('請求超時')
break;
case 500:
console.log('服務器端出錯')
break;
case 501:
console.log('網絡未實現')
break;
case 502:
console.log('網絡錯誤')
break;
case 503:
console.log('服務不可用')
break;
case 504:
console.log('網絡超時')
break;
case 505:
console.log('http版本不支持該請求')
break;
default:
console.log(`連接錯誤${err.response.status}`)
}
} else {
console.log('連接到服務器失敗')
}
return Promise.resolve(err.response)
})
~~~
響應攔截器很好理解,就是服務器返回給我們的數據,我們在拿到之前可以對他進行一些處理。例如上面的思想:如果后臺返回的狀態碼是200,則正常返回數據,否則的根據錯誤的狀態碼類型進行一些我們需要的錯誤,其實這里主要就是進行了錯誤的統一處理和沒登錄或登錄過期后調整登錄頁的一個操作。