axios的简单封装与使用

轻编程

于 2023-04-20 14:39:44 发布

阅读量294

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue3组件化开发实战文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_41861301/article/details/130266198

Vue3组件化开发实战专栏收录该内容

11 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在Vue.js项目中对axios进行简单封装，包括在src/utils/request.js中创建封装请求的方法，以及在src/api/index.js中组织接口。同时，展示了在组件中如何便捷地调用这些封装后的API接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios的简单封装

在src目录下创建一个utils的目录，并在其中创建一个request.js的文件，代码如下：

import axios from 'axios';

export function request(config) {

    // axios实例
    const instance = axios.create({
        baseURL: import.meta.env.VITE_APP_API_BASEURL,
        timeout: 5000,
    })

    // 添加请求拦截器
    instance.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        return config;
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });

    // 添加响应拦截器
    instance.interceptors.response.use(function (response) {
        // 2xx 范围内的状态码都会触发该函数。
        // 对响应数据做点什么
        return response;
    }, function (error) {
        // 超出 2xx 范围的状态码都会触发该函数。
        // 对响应错误做点什么
        if (error.response){

了解本专栏