vue axios请求api封装

最新推荐文章于 2023-12-28 21:45:42 发布

康梓潼

最新推荐文章于 2023-12-28 21:45:42 发布

阅读量124

点赞数

分类专栏： vue 文章标签： vue.js javascript ajax

本文链接：https://blog.csdn.net/weixin_46453221/article/details/119928192

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.下载axios
npm install axios
2.封装api.js

import axios from "axios";
import {Message} from "element-ui";
import qs from "qs";
axios.interceptors.response.use(success => {
    if (success.data && success.status == 200) {
        if (success.data.code != 200) {
            if (success.data.msg) {
                Message.error({
                    message: success.data.msg
                })
                return;
            }
        }
        if (success.data.msg) {
            Message.success({
                message: success.data.msg
            })
        }
        return success.data
    }
}, error => {
    if (error) {
        if (error.response) {
            if (error.response.status == 401) {
                Message.error({
                    message: '用户未认证'
                })
            } else if (error.response.status == 403) {
                Message.error({
                    message: '用户权限不足'
                })
            } else if (error.response.status == 404) {
                Message.error({
                    message: '资源找不到'
                })
            } else if (error.response.status == 504) {
                Message.error({
                    message: '网关超时'
                })
            } else {
                Message.error({
                    message: '未知错误'
                })
            }
        }
    }
    return;
})

let base = ''
export const getRequest = (url, params) => {
    return axios({
        url: `${base}${url}`,
        params: params,
        method: 'get'
    })
}
export const postRequest = (url, params) => {
    return axios({
        url: `${base}${url}`,
        data: params,
        method: 'post'
    })
}
export const postKeyValueRequest = (url, params) => {
    return axios({
        url: `${base}${url}`,
        data: params,
        method: 'post',
        transformRequest: [function (data) {
            let result = '';
            for (let i in data) {
                result += encodeURIComponent(i) + "=" + encodeURIComponent(data[i]) + '&';
            }
            return result;
        }],
        header:{
            'Content-type':'application/x-www-form-urlencoded'
        }
    })
}
export const putRequest = (url, params) => {
    return axios({
        url: `${base}${url}`,
        data: params,
        method: 'put'
    })
}
export const deleteRequest = (url, params) => {
    return axios({
        url: `${base}${url}`,
        params: params,
        method: 'delete',
        paramsSerializer:params=>{
            return qs.stringify(params,{arrayFormat:"repeat"})
        }
    })
}

3.main.js导入引用api中接口

import {getRequest} from "@/utils/api";
import {postRequest} from "@/utils/api";
import {putRequest} from "@/utils/api";
import {deleteRequest} from "@/utils/api";
import {postKeyValueRequest} from "@/utils/api";
Vue.prototype.$getRequest = getRequest;
Vue.prototype.$postRequest = postRequest;
Vue.prototype.$putRequest = putRequest;
Vue.prototype.$deleteRequest = deleteRequest;
Vue.prototype.$postKeyValueRequest = postKeyValueRequest;

测试引用this.$getRequest()