vue3 如何封装aixos

封装 Axios 可以帮助我们更好地管理 HTTP 请求,例如添加统一的基础 URL、请求头、拦截器等功能。

下面是封装 Axios 的一个示例,以及如何在 Vite 项目中使用它来请求数据。

首先,创建一个新的 JavaScript 文件,比如 http.js 或 axiosInstance.js,并在其中配置 Axios 实例:

javascript 复制代码
// src/http.js

import axios from 'axios';

// 创建一个新的 axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置基础 URL
  timeout: 5000, // 设置超时时间
  headers: {'Content-Type': 'application/json'}
});

// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么,例如添加 token 到请求头
    const token = localStorage.getItem('token'); // 示例:从本地存储获取 token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data; // 返回实际的数据而不是整个响应对象
  },
  error => {
    // 对响应错误做点什么
    if (error.response.status === 401) {
      // 处理未授权的情况
      // 可能需要重定向到登录页面或者其他操作
    }
    return Promise.reject(error);
  }
);

export default instance;

使用封装后的 Axios

接下来,在你的 Vue 组件或其他地方使用这个封装好的 Axios 实例:

javascript 复制代码
 // src/views/MyComponent.vue

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <pre>{{ data }}</pre>
  </div>
</template>

<script>
import axiosInstance from '@/http'; // 引入封装好的 axios 实例

export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axiosInstance.get('/endpoint'); // 替换为你的 API 端点
        this.data = response;
      } catch (error) {
        console.error("Failed to fetch data:", error);
      }
    },
  },
};
</script>

在这个例子中,我们在 MyComponent.vue 中定义了一个按钮,点击后会触发 fetchData 方法,该方法通过封装好的 Axios 实例发起请求,并将返回的数据展示出来。

注意事项

  • 确保在 Vue 项目中正确配置了路径别名或相对路径,以便正确导入封装好的 Axios 实例。
  • 根据实际的需求调整 Axios 的配置和拦截器逻辑。
  • 如果你在生产环境中遇到跨域问题,请确保服务器设置了正确的 CORS 头。

通过这种方式,你可以方便地管理和复用 HTTP 请求代码,并且可以根据需要轻松地添加额外的功能,如身份验证和错误处理。

相关推荐
chao_78935 分钟前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼1 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原1 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf1 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js
白仑色1 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端
爱编程的喵2 小时前
React Router Dom 初步:从传统路由到现代前端导航
前端·react.js
阳火锅2 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
每天吃饭的羊2 小时前
react中为啥使用剪头函数
前端·javascript·react.js
Nicholas683 小时前
Flutter帧定义与60-120FPS机制
前端
多啦C梦a3 小时前
【适合小白篇】什么是 SPA?前端路由到底在路由个啥?我来给你聊透!
前端·javascript·架构