Vue(四)：一个封装了请求接口及响应信息的工具类

import axios from "axios"//一个基于 promise 的 HTTP 库   npm install axios即可安装
import {Message} from "element-ui";//这里用的element-ui中的Message消息提示插件

//配置了两个拦截器
/*拦截客户端请求的信息，比如说单点登录、JWT(JSON Web Token一个解决跨域身份验证的方案)，在登录成功之后，服务端就会返回一个token(一个很长的字符串)，后面每一次请求都会携带这个token，服务端就会知道你有没有登录了,即：
1、用户向服务器发送用户名和密码
2、验证服务器之后，会将当前信息(比如用户名，密码，登录时间等信息)保存在当前会话中
3、然后服务器会向用户返回一个session_id，session信息写入用户的cookie中
4、后续的请求，用户都会先从cookie中取出这个session_id一并发送到服务器
5、服务器收到之后，通过比对这个session_id之前保存的数据，确认用户的身份
*/
//每一次请求不可能都要手动添加一个参数吧，所以在这里定义一个拦截器，请求发送，在这里自动将请求拦截下来，自动的往请求里面加一个参数
axios.interceptors.request.use(config => {
    return config;
}, err => {
    Message.error({
        message: "请求超时"
    });
    return Promise.resolve(err);
})
//拦截服务端响应的信息
axios.interceptors.response.use(data => { //{status,data[]}//status表示http响应码{status:200},data[]表示后端的RespBean对象{status:200,msg:"",obj}
    //HTTP响应码是200，后端自己定义了500，在RespBean中，定义为业务逻辑错误
    if (data.status && data.status == 200 && data.data.status == 500) {
        //业务逻辑错误(服务器找不到，服务器错误等，http的响应码就不是200了)
        Message.error({
            message: data.data.msg
        });
        return;
    }
    //为什么要判断这个msg是否存在呢，比如说如果请求表格里面的数据，在list中放的一个javabean，这时候data就是一个数组了，那就没必要展示msg了
    if (data.data.msg) {
        Message.success({
            message: data.data.msg
        });
    }
    //返回方法调用的哪里，拿到的就是服务端返回的数据
    return data.data;
}, err => {
    //如果HTTP响应码是400,500等就会进入这个err函数中
    //如果服务器没启动或者是路径错误进入此判断中
    if (err.response.status == 504 || err.response.status == 404) {
        Message.error({
            message: "服务器被吃了"
        });
    } else if (err.response.status == 403) {//表示权限不足
        Message.error({
            message: "权限不足，请联系管理员"
        });
    } else if (err.response.status == 401) {//表示未登录
        Message.error({
            message: err.response.data.msg//服务器返回来的信息
        });
    } else {
        if (err.response.data.msg) {
            Message.error({
                message: err.response.data.msg
            });
        } else {
            Message.error({
                message: "未知错误"
            });
        }
    }
})
//登录接口
let base = "";//请求前缀，以后如果要给服务器统一增加一个前缀，只需要更改这里就好
export const postKeyValueRequest = (url, params) => {
    return axios({
        method: "post",
        url: `${base}${url}`,//url的拼接，base就是我们定义的前缀，url就是你传进来的请求
        data: params,
        transformRequest: [function (data) {
            let ret = "";
            for (let it in data) {
                ret += encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&"
            }
            return ret;
        }],
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        }
    });
}
//post请求接口
export const postRequest = (url, params) => {
    return axios({
        method: "post",
        url: `${base}${url}`,
        data: params,
        headers: {
            "Content-Type": "application/json"
        }
    });
}
//文件上传接口
export const uploadFileRequest = (url, params) => {
    return axios({
        method: "post",
        url: `${base}${url}`,
        data: params,
        headers: {
            "Content-Type": "multipart/form-data"
        }
    });
}
//put请求接口
export const putRequest = (url, params) => {
    return axios({
        method: "put",
        url: `${base}${url}`,
        data: params,
        headers: {
            "Content-Type": "application/json"
        }
    });
}
//delete请求接口
export const deleteRequest = (url) => {
    return axios({
        method: "delete",
        url: `${base}${url}`
    });
}
//get请求接口
export const getRequest = (url) => {
    return axios({
        method: "get",
        url: `${base}${url}`
    });
}