封装axios vue3

原创

mob64ca12e2f123 2024-05-20 05:53:12 ©著作权

文章标签 ios 封装 javascript 文章分类 iOS 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e2f123的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何封装axios vue3

1. 整个流程

flowchart TD
    A(开始) --> B(创建axios实例)
    B --> C(封装请求方法)
    C --> D(导出方法)
    D --> E(使用封装后的axios)
    E --> F(结束)

2. 具体步骤

步骤1：创建axios实例

在项目中创建一个http.js文件，用于创建axios实例。

// http.js

import axios from 'axios';

const instance = axios.create({
    baseURL: '
    timeout: 5000
});

export default instance;

步骤2：封装请求方法

在项目中创建一个api.js文件，用于封装各种请求方法。

// api.js

import http from './http';

const get = (url, params) => {
    return http.get(url, { params });
};

const post = (url, data) => {
    return http.post(url, data);
};

export {
    get,
    post
};

步骤3：导出方法

在api.js文件中，将封装的请求方法导出。

// api.js

import { get, post } from './api';

export {
    get,
    post
};

步骤4：使用封装后的axios

在Vue组件中使用封装后的axios进行请求。

// App.vue

import { get } from './api';

export default {
    mounted() {
        get('/data', { id: 1 })
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.error(error);
            });
    }
};