vue中axios的使用與封裝

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

當然首先是npm安裝axios 很簡單$ npm install axios --save
在src下新建文件夾 service / index.js
接着上代碼

 1 import axios from 'axios';
 2 import { Toast} from 'mint-ui';// 我用的mint的框架來彈出我的錯誤返回 大家可以用別的提示
 3 import router from '../router'
 4 
 5 // 默認超時設置
 6 axios.defaults.timeout = 50000; 7 8 // 相對路徑設置 9 axios.defaults.baseURL =''; 10 11 //http request 攔截器 12 axios.interceptors.request.use( 13 config => { 14 // 獲取token 15 const token = localStorage.getItem('cc_token'); 16 // 設置參數格式 17 if(!config.headers['Content-Type']){ 18 config.headers = { 19 'Content-Type':'application/json', 20  }; 21  } 22 // 添加token到headers 23 if(token){ 24 config.headers.token = token 25  } 26 // 鑒權參數設置 27 if(config.method === 'get'){ 28 //get請求下 參數在params中，其他請求在data中 29 config.params = config.params || {}; 30 let json = JSON.parse(JSON.stringify(config.params)); 31 //一些參數處理 32 }else{ 33 config.data = config.data || {}; 34 //一些參數處理 35  } 36 return config; 37  }, 38 err => { 39 return Promise.reject(err); 40  } 41 );

 

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

//http response 攔截器
axios.interceptors.response.use(
  response => { //一些統一code的返回處理 if(response.data.code === 501){ // 登錄驗證 //做了個示例跳轉項目中登錄，並記錄下相對路徑  router.push({ name:'login',//從哪個頁面跳轉  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){ //返回成功處理 這里傳的啥 后續調用的時候 res就是啥 resolve(response.data.data);//我們后台所有數據都是放在返回的data里所以這里統一處理了 }else{ //錯誤處理  Toast(response.data.msg) } }) .catch(err => { reject(err); let message = '請求失敗！請檢查網絡'; //錯誤返回 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 = '請求失敗！請檢查網絡'; 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 = '請求失敗！請檢查網絡'; 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 = '請求失敗！請檢查網絡'; 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 = '請求失敗！請檢查網絡'; if(err.response)message=err.response.data.message; Toast(message) }) }) }

 

好了 主要的文件編輯好 然后在service中新建api.js文件並引入對應組件方法

import Vue from 'vue';
import {post,fetch,patch,put,del,upload,ret2} from './index' Vue.prototype.$post=post; Vue.prototype.$fetch=fetch; Vue.prototype.$patch=patch; Vue.prototype.$put=put; Vue.prototype.$del=del;

 

接着就可以開始寫各個API方法了

//也可以不需要
const _baseUrl=process.env.API_URL;//這里我在項目配置文件里面設置了相對路徑
//登錄方法
const loginURL = `${_baseUrl}api/admin/login`;
export const loginApi = function(json) { return Vue.prototype.$post(loginURL,{"username":json.username,"passwd":json.password}) }; //修改賬號信息RESTful const editAdminUrl = `${_baseUrl}api/admin/user/info`; export const editAdminListApi = function (id,json) { return Vue.prototype.$put(`${editAdminUrl}/${id}`,json) }; //等等...

 

最后是使用，非常簡單方便，在vue文件中引入並使用

  import { loginApi ,editAdminListApi } from "../../service/api";
    export default { methods：{ //登錄  login(){ let json = { userName:'xx', password:'xx' } loginApi().then(res=>{ console.log(res) }) }, // RESTful 修改信息  editAdminList(){ let id = 1; let json = {name:11}; editAdminListApi(id,json).then(res=>{ console.log(res) }) } } }

使用方便簡潔。

over