springboot拦截请求转发到他服务器_用Spring Boot+Vue做微人事项目第三天

用Spring Boot+Vue做微人事项目系列目录

前两天把微人事项目的登录的前端页面和后台接口都写完了，现在开始做前后端接口的对接了，前后端接口的对接就需要用到axios来发送我们的网络请求

把失败信息统一封装起来，不需要去各个页面去处理这个问题

在vuehr项目中创建一个api.js文件，

①.首先把下载好的axios通过`import axios from 'axios'`导入进来

②.通过import{Message} from "element-ui"把element-ui的错误信息的弹框引入进来

③.编写处理响应信息的响应拦截器，该拦截器有success和error两个回调函数，做一些判断

④.编写请求封装的方法postKeyValueRequest，该方法有url和params两个参数，url是请求路径，params是请求参数，返回axios方法，该方法和ajax异步方法类似，也有method，url和data

import axios from 'axios'

//单独引入 此时调用方法为 Message(options)。我们也为每个 type 定义了各自的方法，如 Message.success(options)。并且可以调用 Message.closeAll() 手动关闭所有实例。

import {Message} from "element-ui";

//处理响应信息的响应拦截器

/*上面已经导入了axios的对象了，这个对象里面有个响应的拦截器axios.interceptors.response.use(),use里面的data是服务端响应给你的数据，

该拦截器有两个回调函数，一个是success，一个是error,和jQuery里面的ajax一样请求数据的时候也有两个回调函数，一个success，一个error,可以简单的理解为

http的响应码是200的，它会进入到success方法中来，400以上的会进入到error来，

*/

axios.interceptors.response.use(success => {

//success.status:http的响应码 success.status ==200 success.data.status == 500:返回json的status

if (success.status && success.status ==200 && success.data.status == 500){

//把后台的出错消息写出来

Message.error({ message:success.data.msg})

return;

}

return success.data

},error => {