Vue3学习:如何在Vue3项目中创建一个axios实例

第一步:安装axios

首先,确保你的项目中已经安装了 Axios。如果还没有安装,可以通过 npm 或 yarn 来安装:

复制代码
npm install axios

第二步:创建 Axios 实例

接下来,可以在项目的某个合适的位置(比如 src/utils/ 目录下)创建一个新的 JavaScript 文件,例如 axiosInstance.js,并在该文件中创建 Axios 实例:

javascript 复制代码
// src/utils/axiosInstance.js
import axios from 'axios';

// 创建 Axios 实例
const api = axios.create({
  baseURL: '你的API基础URL', // e.g., 'https://api.example.com'
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
    // 可以在这里添加其他默认请求头,如认证token等
  },
});

// 添加请求拦截器(可选)
api.interceptors.request.use(config => {
  // 在发送请求之前做些什么,例如添加Token
  // config.headers.Authorization = `Bearer ${token}`;
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器(可选)
api.interceptors.response.use(response => {
  // 对响应数据做点什么,例如错误码处理
  return response.data;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default api;

第三步:在 Vue 组件中使用 Axios 实例

最后,在需要发送HTTP请求的 Vue 组件中,导入刚刚创建的 Axios 实例并使用它来发送请求:

javascript 复制代码
<template>
  <!-- ... -->
</template>

<script setup>
import axiosInstance from '@/utils/axiosInstance';

async function fetchData() {
  try {
    const response = await axiosInstance.get('/your-endpoint');
    console.log(response);
  } catch (error) {
    console.error('There was an error!', error);
  }
}
</script>

<style scoped>
<!-- ... -->
</style>
相关推荐
2501_926227946 小时前
.Net程序员就业现状以及学习路线图(四)
学习·.net
滴滴滴嘟嘟嘟.7 小时前
Qt自定义列表项与QListWidget学习
开发语言·qt·学习
Yvonne爱编码7 小时前
零基础学习数据采集与监视控制系统SCADA
学习·信息可视化·信息与通信·数据可视化
肥肠可耐的西西公主8 小时前
后端(JDBC)学习笔记(CLASS 1):基础篇(一)
笔记·学习
励志不掉头发的内向程序员8 小时前
从零开始的python学习——文件
开发语言·python·学习
悠哉悠哉愿意9 小时前
【数学建模学习笔记】无监督聚类模型:分层聚类
笔记·python·学习·数学建模
北冥电磁电子智能10 小时前
江协科技STM32学习笔记补充之004
笔记·科技·学习
一个响当当的名号10 小时前
c++primer 个人学习总结-模板和泛型编程
开发语言·c++·学习
落羽的落羽10 小时前
【C++】C++11的可变参数模板、emplace接口、类的新功能
开发语言·c++·学习
滴滴滴嘟嘟嘟.10 小时前
Qt对话框与文件操作学习
开发语言·qt·学习