vue axios请求封装

最新推荐文章于 2026-04-14 09:51:16 发布

原创最新推荐文章于 2026-04-14 09:51:16 发布 · 451 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

vue3.0 同时被 2 个专栏收录

4 篇文章

订阅专栏

axios

1 篇文章

订阅专栏

本文主要分享如何在Vue.js项目中对axios进行封装，通过在main.js中引入并挂载，实现更方便的API调用，提升项目的代码规范性和可维护性。

介绍就不多写了，直接上代码了！

import axios from 'axios'

// create an axios instance
const service = axios.create({
    // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    withCredentials: true, // send cookies when cross-domain requests
    timeout: 30000, // request timeout
    headers: {
        //'Content-Type': 'application/json; charset=utf-8'
        "Content-Type": "application/x-www-form-urlencoded"
    },
    //请求参数处理
    transformRequest: [
        function(data) {
            let ret = "";
            for (let it in data) {
                ret +=
                    encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
            }
            return ret;
        }
    ]
})

// request interceptor
service.interceptors.request.use(
    config => {
        // do something before request is sent
        return config
    },
    error => {
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

// response interceptor
service.interceptors.response.use(
        response => {
            const res = response.data
            return res;
        },
        error => {
            console.log('err' + error) // for debug

            return Promise.reject(error)
        }
    )
    /**
     * 封装get方法
     * @param url
     * @param data
     * @returns {Promise}
     */

service.get = (url, data = {}) => {
    return new Promise((resolve, reject) => {
        const params = {
            url: url,
            method: 'get',
            params: data
        }
        resolve(service(params));
    })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

service.post = (url, data = {}) => {
    return new Promise((resolve, reject) => {
        const params = {
            url: url,
            method: 'post',
            data
        }
        resolve(service(params));
    })
}

/**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */

service.patch = (url, data = {}) => {
    return new Promise((resolve, reject) => {
        const params = {
            url: url,
            method: 'patch',
            data: data
        }
        resolve(service(params));
    })
}

/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */
service.put = (url, data = {}) => {
        return new Promise((resolve, reject) => {
            const params = {
                url: url,
                method: 'put',
                data
            }
            resolve(service(params));
        })
    }
    /**
     * 请求地址处理
     * @param {*} actionName action方法名称
     */
service.adornUrl = (actionName, who) => {
    // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
    //添加多ip提供接口代理
    var proxyApi = "";
    var url = '';
    var token = "?token=dXNlciUzRGZvc2hhbl9uYWlyZV9hbmFseXNpcyUyNnB3ZCUzRGZvc2hhbl9uYWlyZV9hbmFseXNpc18xMDAx";
    if (who) {
        switch (who) {
            case "proxyYh":
                proxyApi = "/proxytest";
                url = "";
                break;
            default:
                break;
        }
    }
    // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
    return (
        (process.env.NODE_ENV !== "production" ?
            proxyApi : '') + url + actionName + token
    );
}

export default service

在入口main.js中引入并挂载

import http from '@/utils/request'
Vue.prototype.$http = http

实际使用

     this.$http.post(this.$http.adornUrl("独有路径", "proxyYh"), {参数})
        .then(data => {
            //请求成功
        })
        .catch(err => {
          //请求出错
        })