axios的封裝 配置及使用

背景：乙個vue專案中需要使用axios進行資料介面請求，所以，本文簡單講了一下本人在乙個專案中使用axios的過程，包括安裝axios、封裝axios以及axios的封裝後的具體使用

npm

install axios

//1、引入axios

import axios from 'axios'
//2、建立axios的例項
)//3、axios的攔截--request
)//4、axios的攔截--response
);//清除token
}if(err.response.code ==
= 500)
return promise.reject(err);}
)//5、get請求的封裝
export
function get(url,params=
)).then(res =
>
).catch(err =
>)}
)}//6、post請求封裝  預設json格式:'content-type'
:'content-type'
:'multipart/form-data'
}export
function post(url,params=
,headers=
)).then(res =
>
).catch(err =
>)}
)}//7、將模組暴露
export default

import

from '../axios.js'
; //獲取使用者list
export const getuserlist = params =
> get(
'/userlist',params)
;//提交使用者資訊
export const updateuserinfo = params =
> post(
'/updateuserinfo',params)
;//批量重置密碼  引數最後轉化為 userid[0]:111 userid[1]:2222 userid[2]:333  userid[3]:444 userid[4]:5555
export const resetpwd = params =
> axios.post(
'/resetsysuserpasswordbyuserid',params)
;

npm

install qs

import

from '../axios.js'
;import qs from 'qs'
;//獲取使用者list
export const getuserlist = params =
> get(
'/userlist',qs.stringify(params))
;//提交使用者資訊
export const updateuserinfo = params =
> post(
'/updateuserinfo',qs.stringify(params))
;//批量重置密碼  引數最後轉化為 userid[
]:111 userid[
]:2222 userid[
]:333  userid[
]:444 userid[
]:5555
export const resetpwd = params =
> axios.post(
'/resetsysuserpasswordbyuserid', qs.stringify(data,
));

import

from '../../api/user.js'
;//引入user的api
export default(
},    methods:);
},        //2、提交使用者資訊
async updateuserinfo())
;},//3、批量重置密碼  
async resetpwd())
;},}
})

axios封裝使用

記錄專案中使用過的axios封裝，以便下次使用。import axios from axios 引用axios import from util util 引用剛才我們建立的util.js檔案，並使用getcookie方法 import qs from qs 很重要！過濾json格式化 axios ...

vue中axios得封裝及使用

現在目錄中得src檔案中自定義乙個檔案在裡面建立乙個request.js檔案 這個裡面寫得請求攔截和響應攔截 如下 eslint disable prefer promise reject errors eslint disable next line no unused vars import a...

axios的封裝和使用

響應 instance.interceptors.response.use res else err return promise.reject err mergeoptions options 真正傳送請求在這 request options 封裝get方法 get url,config 封裝po...