DaZeng：深度剖析接口的错误拦截

接口拦截

接口拦截的项目实战：从0独立开发企业级电商系统

统一报错、未登录统一拦截、请求值，返回值统一处理。

使用Axios拦截器

1. 安装：npm install axios
2. 在main.js引入Axios，导入vue-axios
   import axios from ‘axios’
   import VueAxios from ‘vue-axios’
3. 挂载导入的vue-axios，方便项目中用this.axios直接使用axios不然每次使用前都要去import axios就很麻烦。
   Vue.use(VueAxios,axios)
4. 添加拦截器interceptors，注意response.data，是响应拦截器的data，而res.data是前后端接口字段中自定义的data，state也是自定义的。
5. 在设置status时应当做统一分类处理，比如订单一类的都是2001,2002之类的。

// 添加响应拦截器(返回值拦截)
axios.interceptors.response.use((response)=>{
	    //获取所有的接口数据
	    let res = response.data;
	    //检测已经登陆，返回数据
	    if(res.status == 0){
	      //返回接口里面data包含的值
	      return res.data
	    }
	    //检测未登录，拦截跳转到登录页
	    else if(res.status == 10){
	      window.location.href = '/#/login';
	    }
	    //登录失败，错误的提示信息
	    else{
	      alert(res.msg)
	    }
	}, function (error) {
	    // 对响应错误做点什么
	    return Promise.reject(error);
  	}
)

设置baseURL及接口环境

使用JSONP或CORS跨域以及接口代理时的baseURL

6. 设置请求默认地址baseURL和响应超时时间
   JSONP或CORS跨域以及接口代理的传送门

baseURL根据前端的跨域方式做调整：

JSONP或CORS跨域：后端域名和前端不一样时用baseURL用’http://完整的url地址‘ 。

接口代理：后端与前端一样时，前端在这里定义了/api后端接口也要统一为/api,后端没有/api的话可以前端在转发时统一去掉/api。拦截时接口代理中用：changeOrigin:true,pathRewrite:{’/api’:’’}去掉/api。

//接口代理
axios.defaults.baseURL = '/api';

//CORS或JSONP跨域
axios.defaults.baseURL = 'https://order.imooc.com/pay/cartorder'

//设置超时时间
axios.defaults.timeout = 8000;

JSONP或CORS跨域接口的环境设置（不是接口代理的情况下统一管理baseURL）

为什么要去设置？

1. 开发上线不同阶段，需要不同的配置。
2. 不同的跨域方式，配置不同。
3. 打包时候统一注入环境参数，统一管理环境，输出不同的版本包。

如何去做？

1. src文件夹下创建env.js文件
2. 在package.json中注入环境参数，通过–mode=环境参数的值，来赋值。

"scripts": {
    "serve": "vue-cli-service serve --mode=development",
    //自定义的环境变量prev
    "prev":"vue-cli-service serve --mode=prev",
    "build": "vue-cli-service build --mode=production",
    "lint": "vue-cli-service lint"
  },

3. 在env.js中去拿到环境参数：node.js中的process进程通过process.env.NODE_ENV获取当前nodejs服务器下的环境变量。
4. 自定义环境变量xxx时要在src下加一个文件.env.xxx，并且在里面配置NODE_ENV = ‘xxx’

let baseUrl;
//根据不同的环境输出不同的url地址
//在package.json中增加 --mode=XXX参数（环境变量传给参数）
//process.env取到当前nodejs服务器下的环境变量
switch (process.env.NODE_ENV) {
    //开发development，测试test，生产production
    case 'development':
        baseUrl = '  https://dev-www.easy-mock.com/mock/5e664553f4760626a3a312e0/example/api'
        break;

    case 'test':
        baseUrl = 'https://test-www.easy-mock.com/mock/5e664553f4760626a3a312e0/example/api'
        break;

    case 'production':
        baseUrl = 'pro-https://www.easy-mock.com/mock/5e664553f4760626a3a312e0/example/api'
        break;

        //自定义环境变量prev一定要在加一个文件.env.prev，并且在里面配置
    case 'prev':
        baseUrl = 'https://pre-www.easy-mock.com/mock/5e664553f4760626a3a312e0/example/api'
        break;

    default:
        baseUrl = 'https://dev-www.easy-mock.com/mock/5e664553f4760626a3a312e0/example/api'
        break;
}

export default{
    baseUrl
}

5. 在main.js导入env，并使用由环境变量获取到的baseURL地址

import env from './env'
axios.defaults.baseURL = env.baseUrl;

6. npm run serve/pre/build 就会使用不同的环境变量，从而使用不同的baseURL。