【axios】axios不常用方法整理

摘要： 參考文件：https://www.npmjs.com/package/axios 前期準備：可以用npm安裝axios. npm install axios/bower install axios 我們經常用axios做請求的時候一般常用的是如下格式...

參考文件：https://www.npmjs.com/package/axios

前期準備：可以用npm安裝axios. npm install axios/bower install axios

我們經常用axios做請求的時候一般常用的是如下格式

1.post請求

//一.直接請求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//---------------------------------我是分割線-----------------------------------------
//二.用引數請求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});

2.get請求

//一.直接請求
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

//---------------------------------我是分割線-----------------------------------------
//二.用引數請求
axios({
method:'get',
url:'/user',
})
.then(function(res) {
console.log(res)
});
 .catch(function (error) {
console.log(error);
});

上面都是一些常用的格式請求，但是在業務需求中常有一些需求不滿足於上面，下面介紹幾種不常用的請求

1.axios.all[{}].then(axios.spread)同時執行多個請求，適用於一切企業類網站有多個篩選條件的時候

//上面是所有請求執行完畢之後再去執行返回， 
axios.all([
axios.get('https://api.github.com/xxx/1'),
axios.get('https://api.github.com/xxx/2')
])
.then(axios.spread(function (userResp, reposResp) {
// 上面兩個請求都完成後，才執行這個回撥方法
console.log('User', userResp.data);
console.log('Repositories', reposResp.data);
}));

2.用特定的格式執行post請求 傳給後臺的引數有的是需要去掉{}的，即是x-www-form-urlencoded格式

//方法一：
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

//---------------------------------我是分割線-----------------------------------------
//二.用引數請求
var qs = require('qs');//或者安裝npm安裝qs
axios.post('/xxxxx/xx', qs.stringify({ 'bar': 123 }));

3.攔截器 在請求之前或者接收之前進行攔截

//-------------------------------官網例子-------------------------------
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
 
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});


//--------------------------------------------專案中程式碼----------------------------------------------
axios.interceptors.request.use(function (config) {
config.withCredentials = true//請求頭的配置，預設是false
config.headers = {
token :xxxx//有的請求需要token，需要在這裡配置
}
return config;
}, function (error) {
return Promise.reject(error);
})