上篇文檔 我們 安裝了 我們需要的插件 這篇文章 做一些 配置 以及項目的正式開始
首先我們做一下 axios 的配置
axios({
method: 'post',
url:'h'
})
.then((response)=>{
console.log(response.data)
})
.catch((error)=>{
console.log(error)
})
//方法2
axios.post('',{
})
.then((response)=>{
console.log(response.data)
})
.catch((error)=>{
console.log(error)
})
注意：
方法一中向後臺發送數據時：
//get方式發送數據
axios.get('', {
params: {
}
}).then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
//post方式發送數據
axios.post('', {
}).then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
二、自定義請求實例
//常見請求實例配置項
{
baseURL： ‘’， //基礎URL
timeout：1000， //請求延時時間
headers {'X-Requested-With': 'XMLHttpRequest'}, //自定義請求頭內容
responseType: 'json', //請求數據類型包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
params: {}, //無論請求爲何種類型，在params中的屬性都會以key=value的格式在urlzhong拼接
transformRequest: [function(data){
return data
}], // 只適用於 POST,PUT,PATCH，transformRequest` 允許在向服務器發送前，修改請求數據。後面數組中的函數必須返回一個字符串，或 ArrayBuffer，或 Stream
transformResponse: [function(data){
return data
}], //transformResponse` 在傳遞給 then/catch 前，允許修改響應數據
validateStatus: function(status){
return status < 400 //狀態碼小於400時均爲成功（返回true）
}, //validateStatus` 定義對於給定的HTTP 響應狀態碼是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者設置爲 `null` 或 `undefined`)，promise 將被 resolve; 否則，promise 將被 rejecte
cancelToken //取消請求，下文詳細說明
}
使用自定義請求實例時需要先創建對象
var HTTP = axios.create({}) // {}中放入上文中的配置項
使用transformRequest將數據格式改爲key=value的格式
import queryString from 'queryString' //轉換格式包，無需下載
var HTTP = axios.create({
baseURL:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/',
timeout: 1000,
responseType:'json',
headers:{
'custome-header': 'miaov',
'content-type':'application/x-www-form-urlencoded' //轉換爲key=value的格式必須增加content-type
},
transformRequest:[function(data){
console.log(data)
data.age = 30; //發送之前增加的屬性
return queryString.stringify(data); //利用對應方法轉換格式
}]
})
複製代碼
axios併發請求，通過axios。all()方法，需在兩個請求都完成後才能被成功調用
複製代碼
export default {
name: 'hello',
created(){
function http1(){
return HTTP.get("test-axios")
}
function http2(){
return HTTP.post("test-post-axios")
}
//注意此時常使用axios.spread()方法接收多個響應數據
axios.all([http1(),http2()]).then(axios.spread((res1,res2)=>{
console.log(res1)
console.log(res2)
}))
.catch((error) =>{
if (axios.isCancel(error)) {
console.log(error.message);
}else{
console.log(error)
}
})
}
}
複製代碼
axios攔截器
（1）攔截請求（在發送請求之前做某事）
複製代碼
axios.interceptors.request.use(function(config){
//在發送請求之前做某事
console.log("攔截")
console.log(config) //單次請求的配置信息對象
return config; //只有return config後，才能成功發送請求
},function(error){
//請求錯誤時做些事
return Promise.reject(error);
});
複製代碼
（2）攔截響應
HTTP.interceptors.response.use(function(data){
console.log("response")
console.log(data) //響應數據
return data; //只有return data後才能完成響應
})
當大量使用axios時，可以將axios作爲vue的插件全局使用
首先需要安裝axios，vue-axios
npm install axios vue-axios --save
將其作爲插件
Vue.use(VueAxios, Axios) //注意順序與大小寫
當在其他任意組件中使用時可使用以下方式：
this.$http[method]()
這裏 axios 的配置 我沒有 自己寫 引用了 別人的
https://www.cnblogs.com/pomelott/p/8453262.html