（一）接口错误拦截

使用场景：

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

使用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';

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

从零开始Vue项目实战（二）-搭建环境
1.下载node.js并安装下载地址:https://nodejs.org/en/download/. 下载.msi 格式的直接连续下一步就可以了.安装完成后可以用 node -v 和 npm -v ...
【VUE项目实战】17、通过接口获取菜单并渲染
接上篇<16.主页Header和左侧菜单栏布局> 上一篇我们编写了头部Header和左侧菜单栏的布局样式,本篇我们来通过接口获取菜单数据,并重新加载菜单至左侧菜单栏. 一.获取菜单数据的权 ...
Vue项目实战-vue2(移动端)
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) ...
1.vue项目实战笔记（已完结）
vue项目实战笔记目标目录 1.项目概述 1.1电商项目基本业务概述 1.2电商后台管理系统的功能 1.3电商后台管理系统的开发模式(前后端分离) 1.4电商后台管理系统的技术选型 1.前端项目技 ...
Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
前期回顾 30秒学会 -- <获取验证码基本操作>_0.活在风浪里的博客-CSDN博客前期回顾懒人必备 -- 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用, ...
【VUE项目实战】56、商品添加功能（六）-提交添加的商品
接上篇<55.商品添加功能(五)-商品内容模块> 上一篇我们完成了商品内容编辑模块的开发,也即是完成了商品所有的信息编辑,本篇我们就来开发提交商品所有信息到后台的功能. 一.要实现的效果 ...
【VUE项目实战】54、商品添加功能（四）-商品图片上传模块
接上篇<53.商品添加功能(三)-商品参数及属性模块> 上一篇我们完成了商品参数和商品属性面板的开发,本篇我们来完成商品图片上传模块的开发. 一.要实现的效果我们在商品图片页签,需要放置 ...
vue 动态添加class_前端开发：Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容项目环境搭建路由导航实现 ListVie ...
vue 将字符串最后一个字符给替换_前端开发：Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容项目环境搭建路由导航实现 ListVie ...

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

（一）接口错误拦截

（二）接口环境设置

1. 跨域方式为JSONP CORS 时：

2. 跨域方式为代理时：

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

最新文章

热门文章