vue3 封装aixos

码农键盘上的梦

于 2024-11-04 09:28:37 发布

阅读量842

点赞数 9

CC 4.0 BY-SA版权

分类专栏： Vue3 axios 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44848480/article/details/143475460

1. Vue3 封装 aixos 并且使用 aixos 请求数据

npm install axios
# 或者
yarn add axios

2. Vue3 封装 aixos 并且使用 aixos 请求数据

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

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

1.1. 创建 Axios 实例

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

// src/http.js

import axios from 'axios';

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