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