本文主要跟大家介紹了關于使用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)   }  } }}