方法一:配置transformRequest,缺點:其他請求格式的數據也會被重新格式化(PUT,PATCH)
const service = axios.create({//設置axios為form-data 方法1// headers: {// post: {// "Content-Type": "application/x-www-form-urlencoded"// },// get: {// "Content-Type": "application/x-www-form-urlencoded"// }// },transformRequest: [function (data) {let request = ''for (let item in data) {if (data[item])request += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'}return request.slice(0, request.length - 1)}]
})
方法二:添加請求攔截器,對癥下藥(推薦),所有主要瀏覽器都支持 encodeURIComponent() 函數
//添加請求攔截器
service.interceptors.request.use(config => {//設置axios為form-data 方法2if (config.method === 'post') {let data = ''for (let item in config.data) {if (config.data[item])data += encodeURIComponent(item) + '=' + encodeURIComponent(config.data[item]) + '&'}config.data = data.slice(0, data.length - 1)}return config;},error => {console.log("在request攔截器顯示錯誤:", error.response)return Promise.reject(error);}
);
方法三:添加請求攔截器,使用axios 插件qs轉換,可能存在兼容性問題
import qs from 'qs';
//添加請求攔截器
service.interceptors.request.use(config => {//設置axios為form-data 方法2if (config.method === 'post') {config.data = qs.stringify(config.data); // npm install axios qs --save}return config;},error => {console.log("在request攔截器顯示錯誤:", error.response)return Promise.reject(error);}
);
完整代碼:
import axios from 'axios'
import store from '@/store'
import router from '@/router'
import Vue from "vue";
// import qs from 'qs';
let vue = new Vue()// create an axios instance
const service = axios.create({// index.js設置了代理(解決跨域) api = XXXbaseURL: "/api", // url = base url + request urltimeout: 5000, // request timeout// headers: {// Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",// Cookie: "JSESSIONID=8F611FDFEBA4FA2A1891D5929F5E8682",// "Upgrade-Insecure-Requests": 1,// "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36"// }//設置axios為form-data 方法1// headers: {// post: {// "Content-Type": "application/x-www-form-urlencoded"// },// get: {// "Content-Type": "application/x-www-form-urlencoded"// }// },// transformRequest: [function (data) {// let request = ''// for (let item in data) {// if (data[item])// request += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'// }// return request.slice(0, request.length - 1)// }]
})//添加請求攔截器,若token存在則在請求頭中加token,不存在也繼續請求
service.interceptors.request.use(config => {// 每次發送請求之前檢測都vuex存有token,那么都要放在請求頭發送給服務器,沒有則不帶token// Authorization是必須的// if (store.getters.getToken) {// config.headers.Authorization = store.getters.getToken;// }vue.$Loading.start()//設置axios為form-data 方法2if (config.method === 'post') {// config.data = qs.stringify(config.data); // npm install axios qs --savelet data = ''for (let item in config.data) {if (config.data[item])data += encodeURIComponent(item) + '=' + encodeURIComponent(config.data[item]) + '&'}config.data = data.slice(0, data.length - 1)}return config;},error => {console.log("在request攔截器顯示錯誤:", error.response)vue.$Loading.error()return Promise.reject(error);}
);//respone攔截器
service.interceptors.response.use(response => {vue.$Loading.finish();// 在status正確的情況下,code不正確則返回對應的錯誤信息(后臺自定義為200是正確,并且將錯誤信息寫在message),正確則返回響應return response.data;},error => {vue.$Loading.error()// 在status不正確的情況下,判別status狀態碼給出對應響應if (error.response) {console.log("在respone攔截器顯示錯誤:", error.response)switch (error.response.status) {case 401://可能是token過期,清除它store.commit("delToken");router.replace({ //跳轉到登錄頁面path: '/login',// 將跳轉的路由path作為參數,登錄成功后跳轉到該路由query: { redirect: router.currentRoute.fullPath }});}}return Promise.reject(error.response);}
);export default service// axios({
// url:'/user', // `url`是服務器鏈接,用來請求用
// method:`get`, // `method`是發起請求時的請求方法
// baseURL:'http://some-domain.com/api/', // `baseURL`如果`url`不是絕對地址,那么將會加在其前面。當axios使用相對地址時這個設置非常方便// transformRequest:[function(data){ // `transformRequest`允許請求的數據在傳到服務器之前進行轉化。只能用在 'PUT', 'POST' 和 'PATCH' 這幾個請求方法。數組中的最后一個函數必須返回一個字符串,一個`ArrayBuffer`,或者`Stream`
// //依自己的需求對請求數據進行處理
// return data;
// }],
// transformResponse:[function(data){ // `transformResponse`允許返回的數據傳入then/catch之前進行處理
// //依需要對數據進行處理
// return data;
// }],
// headers:{'X-Requested-with':'XMLHttpRequest'},//`headers`是自定義的要被發送的頭信息
// params:{ //`params`是請求連接中的請求參數,必須是一個純對象,或者URLSearchParams對象
// ID:12345
// },
// paramsSerializer: function(params){//`paramsSerializer`是一個可選的函數,是用來序列化參數,例如:(https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
// return Qs.stringify(params,{arrayFormat:'brackets'})
// },
// data:{//`data`是請求提需要設置的數據,只適用于應用的'PUT','POST','PATCH',請求方法。當沒有設置`transformRequest`時,必須是以下其中之一的類型(不可重復?):-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams。僅瀏覽器:FormData,File,Blob。僅Node:Stream
// firstName:'fred'
// },
// //`timeout`定義請求的時間,單位是毫秒。
// //如果請求的時間超過這個設定時間,請求將會停止。
// timeout:1000,
// //`withCredentials`表明是否跨域請求,
// //應該是用證書
// withCredentials:false //默認值
// //`adapter`適配器,允許自定義處理請求,這會使測試更簡單。
// //返回一個promise,并且提供驗證返回(查看[response docs](#response-api))
// adapter:function(config){
// /*...*/
// },
// //`auth`表明HTTP基礎的認證應該被使用,并且提供證書。
// //這個會設置一個`authorization` 頭(header),并且覆蓋你在header設置的Authorization頭信息。
// auth:{
// username:'janedoe',
// password:'s00pers3cret'
// },
// //`responsetype`表明服務器返回的數據類型,這些類型的設置應該是
// //'arraybuffer','blob','document','json','text',stream'
// responsetype:'json',
// //`xsrfHeaderName` 是http頭(header)的名字,并且該頭攜帶xsrf的值
// xrsfHeadername:'X-XSRF-TOKEN',//默認值
// //`onUploadProgress`允許處理上傳過程的事件
// onUploadProgress: function(progressEvent){
// //本地過程事件發生時想做的事
// },
// //`onDownloadProgress`允許處理下載過程的事件
// onDownloadProgress: function(progressEvent){
// //下載過程中想做的事
// },
// //`maxContentLength` 定義http返回內容的最大容量
// maxContentLength: 2000,
// //`validateStatus` 定義promise的resolve和reject。
// //http返回狀態碼,如果`validateStatus`返回true(或者設置成null/undefined),promise將會接受;其他的promise將會拒絕。
// validateStatus: function(status){
// return status >= 200 &;&; stauts < 300;//默認
// },
// //`httpAgent` 和 `httpsAgent`當產生一個http或者https請求時分別定義一個自定義的代理,在nodejs中。
// //這個允許設置一些選選個,像是`keepAlive`--這個在默認中是沒有開啟的。
// httpAgent: new http.Agent({keepAlive:treu}),
// httpsAgent: new https.Agent({keepAlive:true}),
// //`proxy`定義服務器的主機名字和端口號。
// //`auth`表明HTTP基本認證應該跟`proxy`相連接,并且提供證書。
// //這個將設置一個'Proxy-Authorization'頭(header),覆蓋原先自定義的。
// proxy:{
// host:127.0.0.1,
// port:9000,
// auth:{
// username:'cdd',
// password:'123456'
// }
// },
// //`cancelTaken` 定義一個取消,能夠用來取消請求
// //(查看 下面的Cancellation 的詳細部分)
// cancelToke: new CancelToken(function(cancel){
// })
// });