VUE 封装axios，简化请求，实现拦截

VUE 封装axios，简便访问地址

VUE使用axios代码臃肿，如果你想让使用链接时，代码更加简介 ，就直接复制跟着下面走，需要配合 ElementUI使用

1.在我们的src中创建文件 utils/api.js 然后复制进去，注：看不懂没关系，先用着，后面慢慢看

import axios from "axios";
import { Message } from 'element-ui'; //引入message消息提示
import router from "../router";


//响应拦截器
axios.interceptors.response.use(success => {
    //业务逻辑错误
    if (success.status && success.status == 200) {
        //服务器错误||未登录||权限禁止
        if (success.data.code == 500 || success.data.code == 401 || success.data.code == 403) {
            Message.error({ message: success.data.message });
            return;
        }
        if (success.data.message) {
            Message.success({ message: success.data.message })
        }
    }
    return success.data;
}, error => {
    if (error.response.code == 504 || error.response.code == 404) {
        Message.error({ message: '服务器被吃了o(╯□╰)o' });
    } else if (error.response.code == 403) {
        Message.error({ message: '权限不足，请联系管理员' })
    } else if (error.response.code == 401) {
        Message.error({ message: '尚未登录，请登录' });
        router.replace('/');
    } else {
        if (error.response.data.message) {
            Message.error({ message: error.response.data.message });
        } else {
            Message.error({ message: '未知错误' })
        }
    }
    return;
});

//前缀
let base = '';


//json-post 请求
export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params
    })
}

export const putRequest = (url, params) => {
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params
    })
}

export const getRequest = (url, params) => {
    return axios({
        method: 'get',
        url: `${base}${url}`,
        data: params
    })
}

export const deleteRequest = (url, params) => {
    return axios({
        method: 'delete',
        url: `${base}${url}`,
        data: params
    })
}

2.在main.js中引入

import { postRequest } from "./utils/api";
import { putRequest } from "./utils/api";
import { getRequest } from "./utils/api";
import { deleteRequest } from "./utils/api";

//全局注册
Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.deleteRequest = deleteRequest;

3.项目全局访问使用

//带个form参数的Post请求
 this.postRequest("http://localhost:8070/login",form).then(resp=>{
 
 	console.log(resp)
 	
 })
 
 //或者get
 this.getRequest("http://localhost:8070/getMsg").then(resp=>{
 
	console.log(resp)
	
 })

4.结论

是不是发现，调用axios变得更加简单方便了，直接this调用方法