Vue+axios配置踩坑记录
生活随笔
收集整理的這篇文章主要介紹了
Vue+axios配置踩坑记录
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
避免誤導,先上親測可用的代碼:
/*** Axios封裝*./src/axios/index.js **/ import axios from 'axios' import { Notice,Message,Modal,Spin } from 'iview'; import store from '../vuex/store' import { apiBase } from 'common/api.config'; import qs from 'qs' import {common} from '../common/js/common.js'; import iView from 'iview'// axios 配置 axios.defaults.timeout = 10000; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; axios.defaults.baseURL = apiBase(); axios.defaults.loading = true; // post傳參序列化 axios.interceptors.request.use((config) => {store.state.loading = true;//loading等待let token = localStorage.getItem("token")if( config.loading ) {AJAX_NUM++;$('.loding-spin','.dashborad-wrapper').show();}if(config.method === 'post'){let data = qs.parse(config.data)config.data = qs.stringify({token: token,...data})// config.data = qs.stringify(config.data);} else if(config.method === 'get'){config.params = {token: token,...config.params,}}return config; },(error) =>{return Promise.reject(error); }); //返回狀態判斷 axios.interceptors.response.use((res) =>{AJAX_NUM--;if (AJAX_NUM === 0) { //所有Ajax加載完畢$('.loding-spin','.dashborad-wrapper').hide();}store.state.loading = false;//loading等待if(res.data.code){if (res.data.code == 100) {return res;}else if(res.data.code == 103){ //token失敗Notice.error({title: '登錄驗證失敗',desc: res.data.msg,duration:3,onClose:function () {location.href = '/static/login.html';}});localStorage.removeItem('user');}else if(res.data.code == 104){ //新用戶,默認密碼,需要修改默認密碼common.dialog('重要提示',res.data.msg,() => {location.hash = '/public/center/personal';$('#editPasswordBtn').trigger('click');});}else if(res.data.code == 101){ //參數有誤或后臺報錯common.notices(res.data.code +":"+ res.data.msg , '操作失敗', 'warning');}else{Notice.error({title: '操作失敗',desc: res.data.msg,duration:3,});return Promise.reject(res);}} }, (error) => {store.state.loading = false;//loading等待AJAX_NUM = 0;Notice.error({title: '網絡異常 '+ error,desc: '請檢查網絡,或者稍后刷新重試',duration:4,});return Promise.reject(error); });export function fetch(url, params) {return new Promise((resolve, reject) => {axios.post(url, params).then(res => {resolve(res);}, err => {reject(err);}).catch((error) => {reject(error)})}) } export function fetchGet(url, params) {return new Promise((resolve, reject) => {axios.get(url, params).then(response => {resolve(response);}, err => {reject(err);}).catch((error) => {reject(error)})}) } export function fetchJSON(url, params) {return new Promise((resolve, reject) => {axios.get(url, params).then(response => {resolve(response);}, err => {reject(err);}).catch((error) => {reject(error)})}) } let token = localStorage.getItem("token");export default {get(url,data) {return fetchGet(url,data)},post(url,data) {return fetch(url,data)},getJSON(url,data) {return fetchJSON(url,data)} }復制代碼在這里就不上錯誤的代碼了,之前按照網上的一些教程進行了axios的配置和封裝,結果發請求時出現了這樣的錯誤:
而且是部分接口正常,部分接口報錯的偶發。開始考慮到是axios的機制問題,因為會請求兩次,會先發一次option預請求,查看后臺是否是允許了option請求方式,正確設置了之后還是出現跨域報錯的問題。
接著考慮了取消option預請求,還是不行。
最后經過反復的嘗試,最后還是在axios配置的部分解決了問題。
總結
以上是生活随笔為你收集整理的Vue+axios配置踩坑记录的全部內容,希望文章能夠幫你解決所遇到的問題。