axios拦截，api统一管理

关于封装axios

封装axios是我们使用前端经常做的事情，为什么要封装axios，因为在封装他里面，我们可以做好多东西，比如响应拦截，请求拦截，还有加载动画，使我们请求接口是变得方便且简单。
并且在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。

封装axios

1.首先我们要先下载axios

   npm install axios -S;

2.创建目录
在项目的src目录中，新建一个http文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装axios，api.js用来统一管理接口url, request.js对外暴露放在的api方法。

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import router from '../router';
// vant的toast提示框组件
import {
    Toast } from 'vant';

3.考虑环境变量
我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址。

创建config目录。
目录下创建env.development.js+env.production.js+env.test.js

env.development.js内容如下：

module.exports={
   
    baseUrl:' http://www.devele.com:4456' //开发环境的baseurl
}

// 环境的切换
const {
   baseUrl}=require('../config/env.'+process.env.NODE_ENV);

 "scripts": {
   
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  }

const service = axios.create({
   
  baseURL: baseUrl,
  withCredentials: false,
  timeout: 1000*12 // 请求超时
})

4.设置请求超时
通过axios.defaults.timeout设置请求时间。例如超过了5s，就会告知请求超时，请刷新。

5.post请求头的设置
post请求的时候，我们需加上一个请求头，所以我们进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8

// 设置post请求头
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

6.请求拦截
我们在发送请求前可以进行一个请求的拦截。

为什么要拦截呢，比如有些请求是需要用户登录之后才能访问的。

我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。

// 导入vuex
import store from