vue 2.0+axios 怎麼去請求攔截、請求api管理(2)

這段時間開發搭一個全新的基於vue2.0+element的後臺系統，在此以前我寫過一篇關於axios的方法封裝，飛機 後來我想了一下，能不能作一個api管理呢？在官網中找到了答案，這是官網地址 點我 ，下面開始個人想法。

咱們能夠經過 axios.create()這個方法去建立請求，根據需求去配置，官網有完整的參數參考我就不提了。我本身配置的步驟以下：

在src->api->request.js文件中

import axios from 'axios';//導入axios模塊
//建立axios
const request = axios.create({  
// `baseURL` 將自動加在 `url` 前面  
  baseURL: '',  
// `timeout` 指定請求超時的毫秒數(0 表示無超時時間)  
  timeout: 50000,  
// 請求頭設置  
  header: {    
  'content-type': 'application/json',    
  'content-Type': 'application/x-www-form-urlencoded;charset=utf-8'  
  },
});
//默認請求帶參數
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// 響應攔截器攔截返回的響應信息 6100狀態碼爲用戶未登陸
request.interceptors.response.use(  
  response => {    
  switch (response.data.errcode) {      
// 用戶未登陸       
  case "6100":        
  vue.noFN(response.data.errmsg);        
  router.replace("/login");        
  break;    
}    
  return response;  
},  
error => {    
  return Promise.reject(error);  
});
// 添加請求攔截器
request.interceptors.request.use(function (config) {  
// 在發送請求以前將參數轉碼在ie中會出現參數被編碼的狀況，這邊作統一處理  
  config.data=decodeURIComponent(config.data);  
  return config;
}, 
function (error) {  
// 對請求錯誤作些什麼  
  return Promise.reject(error);
});
//暴露模塊
export default request;

複製代碼

在src->api->api.js文件中，咱們去引用配置完成的axios的基礎方法，api.js文件是用來作api請求的模塊管理，好比說咱們這邊有一個獲取數據列表的方法，我是這麼處理的

//導入axios基礎方法
import request from './request';
//藉助qs對傳過來的參數進行stringify處理
import Qs from 'qs';
export const list = (obj) => request({
  // 獲取列表
  method: 'POST',
  url: 'report/list',
  data: Qs.stringify(obj)
});複製代碼

這樣咱們在須要的使用的地方採用

import { list } from "../api/api";
methods: {
 list().then(r=>{
  //作點什麼
})
}複製代碼

這樣咱們就完成本身想要的api管理。

下篇文章我想帶來關於vue+axios+vuex+vue-router，作用戶是否登陸驗證攔截，喜歡個人文章點點💗下週一更新！

謝謝

轉載請留下地址，禁止商業轉載

有問題能夠反饋給我 qq：652165177；

等我下班把項目放到GitHub上面去。

                                                                                                                                                                                                                                                             minijie