Vue3学习:如何在Vue3项目中创建一个axios实例
第一步:安装axios
首先,确保你的项目中已经安装了 Axios。如果还没有安装,可以通过 npm 或 yarn 来安装:
(图片来源网络,侵删)
npm install axios
第二步:创建 Axios 实例
接下来,可以在项目的某个合适的位置(比如 src/utils/ 目录下)创建一个新的 JavaScript 文件,例如 axiosInstance.js,并在该文件中创建 Axios 实例:
// 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 实例并使用它来发送请求:
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); } }
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。