分享下我自己的axios封裝
axios是個很好用的插件，都是一些params對象，所以很方便做一些統(tǒng)一處理

當(dāng)然首先是npm安裝axios 很簡單$ npm install axios --save
在src下新建文件夾 service / index.js

接著上代碼

import axios from 'axios';import { Toast} from 'mint-ui';// 我用的mint的框架來彈出我的錯誤返回 大家可以用別的提示import router from '../router'// 默認(rèn)超時設(shè)置axios.defaults.timeout = 50000;// 相對路徑設(shè)置axios.defaults.baseURL ='';//http request 攔截器axios.interceptors.request.use( config => {  // 獲取token  const token = localStorage.getItem('cc_token');  // 設(shè)置參數(shù)格式  if(!config.headers['Content-Type']){   config.headers = {    'Content-Type':'application/json',   };  }  // 添加token到headers  if(token){   config.headers.token = token  }  // 鑒權(quán)參數(shù)設(shè)置  if(config.method === 'get'){    //get請求下 參數(shù)在params中，其他請求在data中   config.params = config.params || {};   let json = JSON.parse(JSON.stringify(config.params));   //一些參數(shù)處理  }else{   config.data = config.data || {};   //一些參數(shù)處理  }  return config; }, err => {  return Promise.reject(err); });

以上請求之前的一些處理就完成了
下面是獲得返回的一些處理

//http response 攔截器axios.interceptors.response.use( response => {  //一些統(tǒng)一code的返回處理  if(response.data.code === 501){   // 登錄驗(yàn)證   //做了個示例跳轉(zhuǎn)項(xiàng)目中登錄，并記錄下相對路徑   router.push({    name:'login',//從哪個頁面跳轉(zhuǎn)    query:{     retUrl:window.location.href.split('#')[1] || '',     is_new_user_url:1    }   })  }  return response; }, error => {  return Promise.reject(error) });

接著把所有請求類型都做下簡單封裝

/** * 封裝get方法 * @param url * @param params * @returns {Promise} */export function fetch(url,params={}){ return new Promise((resolve,reject) => {  axios.get(url,{   params:params  })   .then(response => {    if(response.data.code === 200){    //返回成功處理 這里傳的啥 后續(xù)調(diào)用的時候 res就是啥     resolve(response.data.data);//我們后臺所有數(shù)據(jù)都是放在返回的data里所以這里統(tǒng)一處理了    }else{    //錯誤處理     Toast(response.data.msg)    }   })   .catch(err => {    reject(err);    let message = '請求失敗！請檢查網(wǎng)絡(luò)';    //錯誤返回    if(err.response)message=err.response.data.message;    Toast(message)   }) })}/** * 封裝post請求 * @param url * @param data * @returns {Promise} */export function post(url,data = {}){ return new Promise((resolve,reject) => {  axios.post(url,data)   .then(response => {    if(response.data.code === 200){     resolve(response.data.data);    }else{     Toast(response.data.msg)    }   },err => {    reject(err);    let message = '請求失敗！請檢查網(wǎng)絡(luò)';    if(err.response)message=err.response.data.message;    Toast(message)   }) })}/** * 封裝patch請求 * @param url * @param data * @returns {Promise} */export function patch(url,data = {}){ return new Promise((resolve,reject) => {  axios.patch(url,data)   .then(response => {    if(response.data.code === 200){     resolve(response.data.data);    }else{     Toast(response.data.msg)    }   },err => {    reject(err);    let message = '請求失敗！請檢查網(wǎng)絡(luò)';    if(err.response)message=err.response.data.message;    Toast(message)   }) })}/** * 封裝put請求 * @param url * @param data * @returns {Promise} */export function put(url,data = {}){ return new Promise((resolve,reject) => {  axios.put(url,data)   .then(response => {    if(response.data.code === 200){     resolve(response.data.data);    }else{     Toast(response.data.msg)    }   },err => {    reject(err);    let message = '請求失敗！請檢查網(wǎng)絡(luò)';    if(err.response)message=err.response.data.message;    Toast(message)   }) })}export function del(url,data = {}){ return new Promise((resolve,reject) => {  axios.delete(url,data)   .then(response => {    if(response.data.code === 200){     resolve(response.data.data);    }else{     Toast(response.data.msg)    }   },err => {    reject(err);    let message = '請求失敗！請檢查網(wǎng)絡(luò)';    if(err.response)message=err.response.data.message;    Toast(message)   }) })}