本文主要跟大家介紹了關于使用axios的一些心得技巧，分享出來供大家參考學習，下面來一起看看詳細的介紹：
一、帶cookie請求
axios默認是請求的時候不會帶上cookie的，需要通過設置withCredentials: true來解決。
二、使post請求發送的是formdata格式數據
首先必須設置請求頭
//可以通過這種方式給axios設置的默認請求頭axios.defaults.headers = {"Content-Type": "application/x-www-form-urlencoded"}其次再發送之前需要處理一下數據
// 發送請求前處理request的數據axios.defaults.transformRequest = [function (data) {// Do whatever you want to transform the datalet newData = ''for (let k in data) {newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'}return newData}]三、攔截器
你可以截取請求或響應在被 then 或者 catch 處理之前。
舉個小例子：發ajax請求的時候需要有一個loading動畫，而在請求回來之后需要把loading動畫關掉，就可以使用這個攔截器來實現。
//添加請求攔截器axios.interceptors.request.use(config => { //在發送請求之前做某事，比如說 設置loading動畫顯示 return config}, error => { //請求錯誤時做些事 return Promise.reject(error)})//添加響應攔截器axios.interceptors.response.use(response => { //對響應數據做些事，比如說把loading動畫關掉 return response}, error => { //請求錯誤時做些事 return Promise.reject(error)})//如果不想要這個攔截器也簡單，可以刪除攔截器var myInterceptor = axios.interceptors.request.use(function () {/*...*/})axios.interceptors.request.eject(myInterceptor)ps：另外附上自己在項目中使用axios的方式
一般會將所有的ajax請求放在一個模塊中，新建一個http.js
//http.js//設置請求baseURLaxios.defaults.baseURL = '/api'//設置默認請求頭axios.defaults.headers = {"Content-Type": "application/x-www-form-urlencoded"}// 發送請求前處理request的數據axios.defaults.transformRequest = [function (data) {let newData = ''for (let k in data) { newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'}return newData}]// 帶cookie請求axios.defaults.withCredentials = true//get請求function get(url) { return body => axios.get(url, { params: body }) }//post請求function post(url) {return body => axios.post(url, body)}//導出使用 export const login = get('/login')假設配合vue使用
// 引入login模塊import { login } from 'http'export default { methods:{ //配合 async/await使用效果更佳 async get() { try { let res = await login({ account: 'admin' }) console.log(res) } catch (e) { console.log(e) } } }}再另外有些人可能喜歡把axios掛載到Vue的原型上，從而在子組件內可以直接訪問的到，做法如下：
Vue.prototype.$http = axios //其他頁面在使用axios的時候直接 this.$http就可以了
除非頁面足夠簡單，不然我個人不太喜歡這種做法。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
