1抵屿、安裝
npm install axios;
?2洛史、在項目目錄下引入axios
我直接在src下面建api文件夾秘豹，api下面為分裝的axios和根據(jù)不同模塊創(chuàng)建不同的js文件用于管理api接口的service
3腊状、axios.js二次封裝
import?axios?from?'axios';
import?{?baseURL?}?from?'./config.js'
//設(shè)置超時時間诱咏，單位毫秒
axios.defaults.timeout?=?50000;
axios.defaults.baseURL?=?baseURL;
/*?const?service?=?axios.create({
????baseURL:?baseURL,?//?api的base_url
????timeout:?5000?//?請求超時時間
??});
??*/
//設(shè)置是否允許跨域和是否允許攜帶憑證，如果該設(shè)置為false缴挖，請求時不允許攜帶憑證
//?axios.defaults.withCredentials?=?true;?
//?添加超時后的處理（axios中需要你根據(jù)error信息來進(jìn)行判斷）
axios().catch(error?=>?{
????const?{?message?}?=?error;
????if?(error.code?===?'ECONNABORTED'?&&?message.indexOf('timeout')>?-1){
??????//?超時處理袋狞，可以直接彈出錯誤或者重新發(fā)起一次請求
??????alert("請求超時！請檢查網(wǎng)絡(luò)問題");
????}
??????//?若不是超時,則返回未錯誤信息
??????return?Promise.reject(error);
??})
//設(shè)置請求頭
/*?axios.defaults.headers["Content-Type"]?=?"?multipart/form-data;?boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW";?*/??
//?請求攔截器
axios.interceptors.request.use(
??config?=>?{
????if?(localStorage.getItem("token")?!=?null&&
?????localStorage.getItem("token")?!=?undefined&&
??????config.url.indexOf('getToken.do')?==?-1)?{
??????config.headers.Authorization?=?localStorage.getItem("token")
????}
????return?config;
??},
??err?=>?Promise.reject(err)
);
//?response?interceptor
axios.interceptors.response.use(
??response?=>?{
????//?response?根據(jù)不同status?狀態(tài)返回?對應(yīng)不同的comfirm
????const?res?=?response.data
????if?(res.code?===?'后端返回的status或者code獲取其他狀態(tài)碼')?{
??????//?console.log('登錄狀態(tài)已過期')
????}?else?{
??????return?res
????}
??},
??error?=>?{
????//?console.log('err'?+?error)?//?for?debug
????return?Promise.reject(error)
??}
)
export?default?axios
如果報錯說不同源則與后臺溝通讓他允許你的訪問
4映屋、config.js
//判斷是開發(fā)(development)還是生產(chǎn)(production)
export?const?baseURL?=?process.env.NODE_ENV?==?'development'??'http://XXXXXXXX.com/':'http://XXXXXXXX.com/'
5苟鸯、main.js
import?axiosApi?from?'./api/axios/axios.js'
Vue.use(axiosApi);
6、login.js
1棚点、url ：請求接口的地址（就是baseURL后面的哪部分）
2早处、method：請求方法
3、data：post請求中攜帶的數(shù)據(jù)（obj格式）瘫析，params：get請求中攜帶的數(shù)據(jù)（就是在瀏覽器地址xx/xx/xx后面?XX=oo&XX=oo這部分?jǐn)?shù)據(jù)砌梆，obj格式）
4、傳過來的參數(shù)一定要在（query）=>{ }括號中引入贬循，函數(shù)里面才能用
eg:
import?request?from?'../axios/axios';
//?獲取登錄頁數(shù)據(jù)接口
export?const?getApplicInfo?=?(query)?=>{
????return?request({
????????url:'baseURL后面的內(nèi)容',
????????method:'get',
????????params:query
????})
}
//?登錄頁接口
export?const?getLogin?=?(query)?=>{
????return?request({
????????url:'',
????????method:'post',
????????data:query
????})
}
//上傳圖片
export?const?uploadPhoto?=?(query)?=>{
????return?request({
????????url:'/openApi/upload.do',
????????method:?'post',
????????headers:{
????????????'Content-Type':'multipart/form-data'
????????},
????????data:?query
????})
}
7咸包、頁面中使用
import?{getApplicInfo,getLogin}?from?'@/api/service/login'
getApplicInfo(query)
????????.then(res?=>?{
????????})
????????.catch(res?=>?{
?????????????console.log("網(wǎng)絡(luò)開小差了，沒有獲取到圖片哦");?
????????})?
