axios 請求與封裝

get請求的兩種方法：

// from-data 表單提交（上傳、檔案上傳）

let data = 
axios.post('/post', data).then(res=>)
axios().then(res=>)

let formdata = new formdata()

for(let key in data) 
axios.post('/post', formdata).then(res=>)

// axios.all()   axios.spread()

axios.all(
[axios.get('/data.json'),
axios.get('/city.json')
]).then( // 分割不同請求的返回值
axios.spread((datares, cityres) => )
)

axios例項， 基本的引數：

import axios from 'axios'

export default , // 請求頭
params: {}, // 將請求引數拼接在url上
data:{} // 把請求引數放在請求體裡面
})instance.get('/data.json').then(res=>)
// 1.axios 全域性配置-優先順序低
// 2.axios 例項配置-優先順序中
// 3.axios 請求配置-優先順序高
instance.get('/data.json', )
},}

// 實際開發中

let instance = axios.create()
let instance2 = axios.create()
// instance包含的引數：baseurl,timeout,url, method, params
instance.get('/contactlist', 
}).then((res)=>)
// instance包含的引數: baseurl, timeout,method,params.
instance2.get('/orderlist', ).then((res)=>)

axios ***

//在請求或響應被處理前攔截他們。

// 請求***，響應***
import axios from 'axios'
export default , err=> )
// 響應***
axios.interceptors.response.use(res=>, err=> )
// 取消***（了解）
let interceptors = axios.interceptors.request.use(config=> 
return config
})// 取消上面定義的***
axios.interceptors.request.eject(interceptors)
// 下面then中的res，就是上面返回的res
axios.get().then(res=> ).catch(err=> )
// eg: 需要登入狀態(token:'')
let instance = axios.create({})
instance.interceptors.request.use(config => )
// 不需要登入的介面
let newinstance = axios.create({})
// 移動端開發,請求前顯示彈框，請求後隱藏彈框
let instance_phone = axios.create({})
instance_phone.interceptors.request.use(config => )
instance_phone.interceptors.response.use(res=> )
}}

axios 錯誤處理

// 請求錯誤時，進行的處理
created() , err=> )
axios.interceptors.response.use(res => , err=> )
axios.get('/data.json').then((res)=>).catch(err=> )
// eg:實際開發過程中，新增統一錯誤處理
let instance = axios.create({})
instance.interceptors.request.use(config => , err=> , 2000)
return promise.reject(err)
}) instance.interceptors.response.use(res => , err=> , 2000)
return promise.reject(err)
}) // 不需要單獨做錯誤處理，如需要可單獨新增catch處理
instance.get('/data.json').then((res)=>)
}

取消axios網路請求，取消正在進行的http請求。

created () ).then(res => ).catch(err=>)
// 取消請求(message 是可選)
// 可能用到取消請求
}

axios請求封裝

首先在vue專案下安裝axios以及支援非同步提示的iview元件庫 npm install axios npm install iview 在src資料夾下新建axios資料夾，在其中新建api.js用於存放介面，request.js用於封裝axios物件 編寫request.js 123 456...

axios請求封裝

axios請求封裝 新建http.js import axios from axios 匯入axios import router from router 匯入路由 import qs from qs import from element ui 匯入element ui const configb...

vue 封裝axios請求

最近接手新的vue專案，發現axios竟然沒有封裝，立馬動手封裝，這裡記錄一下完整的封裝過程，廢話不說，直接上 baseconfig.js檔案 存放各個伺服器的位址 const express require express const proenv require pro.env 生產環境配置檔案...