Vue项目实战：接口错误拦截与环境设置

（一）接口错误拦截

使用场景：

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

使用axios插件进行拦截:

• 安装axios

  npm i axios --save-dev

• 在main.js文件中加入：

import axios from 'axios'
import VueAxios from 'vue-axios'

axios.defaults.baseURL = '/api';  
axios.defaults.timeout = 8000;
//接口错误拦截  
//其中：第一个参数是拦截业务（接口错误）异常（前提是http状态码是200）的函数，第二个参数拦截http状态码异常的函数。
axios.interceptors.response.use((response) => {
  let res = response.data;//这个response不是接口返回，而是axios封装给我们的。response.data才是接口返回值。
  let path = location.hash;
  if (res.status == 0) {
    return res.data;
  } else if (res.status == 10) {
      if (path != '#/index') {
        window.location.href = '/#/login';
        
      } 
      return Promise.reject(res);
  } else {
    Message.warning(res.msg);
    return Promise.reject(res);
  }
}, (error) => {
    let res = error.response;
    Message.warning(res.data.message);
    return Promise.reject(error)
});
Vue.use(VueAxios, axios);

（二）接口环境设置

场景：

• 开发上线的不同阶段，需要不同的配置
• 不同跨域方式，配置不同
• 打包的时候统一注入环境参数

1. 跨域方式为JSONP CORS 时：

把环境变量抽取出来，封装在一个模块中，便于管理与维护。

• 在package.json，修改：

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

• 在src下新建一个env.js:

let baseURL;
switch (process.env.NODE_ENV) {
    case 'development':
        baseURL = 'http://dev-mall-pre.springboot.cn/api';
        break;
    case 'test':
        baseURL = 'http://test-mall-pre.springboot.cn/api';
        break;
    case 'production':
        baseURL = 'http://prod-mall-pre.springboot.cn/api';
        break;
    default:
        baseURL = 'http://mall-pre.springboot.cn/api';
        break;
}

export default {
    baseURL
}

• 在 mian.js 中，加入：

import env from './env'
axios.default.baseURL = env.baseURL;

如何想再添加一个自定义的环境变量 myProd：

• 在src下新建一个env.myProd:

NODE_ENV = "myProd"

• 在 package.json 中，添加：

  "scripts": {
    "serve": "vue-cli-service serve --mode=development",
    "build": "vue-cli-service build --mode=test",
    "lint": "vue-cli-service lint --mode=production",
    "myProd": "vue-cli-service lint --mode=myProd"
  },

• 在 env.js 中，添加:

let baseURL;
switch (process.env.NODE_ENV) {
    case 'development':
        baseURL = 'http://dev-mall-pre.springboot.cn/api';
        break;
    case 'test':
        baseURL = 'http://test-mall-pre.springboot.cn/api';
        break;
    case 'production':
        baseURL = 'http://prod-mall-pre.springboot.cn/api';
        break;
    case 'myProd':
        baseURL = 'http://prod-mall-pre.springboot.cn/api';
        break;    	
    default:
        baseURL = 'http://mall-pre.springboot.cn/api';
        break;
}

export default {
    baseURL
}

2. 跨域方式为代理时：

• 在vue.config.js文件中修改target值：

module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': {
                target: 'https://www/imooc.com',
                changeOrigin: true,
                pathRewrite: {
                    './api':''
                }
            }
        }
    }
}

• 而main.js文件中，仍然是：

axios.defaults.baseURL = '/api';