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