当前位置： 首页 > news >正文

Vue3中使用axios

news 2025/5/7 8:09:34

Promise介绍

所谓Promise，简单说就是一个容器，里面保存看某个未来才会结束的事件（通常是一个异步操作）的结果。从

语法上说，Promise是一入对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理

同步代码与异步代码

 

安装并引入axios

npm install axios

此时package.json里面就多了axios依赖

 引入axios

获取数据

Axios GET参数构成：axios.get(url,{config{},…{}…})

  1. url:

    • 字符串：目标服务器的地址，如 https://api.example.com/resource。

  2. config (可选):

    • 配置对象，用于设置请求的具体行为。常用的配置项包括：

    • params: URL 查询参数，将其序列化为查询字符串并附加到请求 URL。例如：

      params: { userId: 1, sort: 'asc' }

    • headers: 自定义请求头，例如 Authorization 头：

      headers: { 'Authorization': 'Bearer YOUR_TOKEN' }

    • timeout: 请求超时的时间，单位为毫秒。

      timeout: 5000 // 5秒超时

    • responseType: 指定响应类型（如 'json', 'text', 'blob', 'arraybuffer', 'document'）。

    • withCredentials: 指定是否跨域请求时是否需要使用凭证（如 Cookies）。

    • validateStatus: 自定义请求状态码的成功范围。默认情况下，2xx 状态码会被视为成功。

// 以下是个获取url里数据的函数
const getStudent = async () => { // await用在函数里面要在函数前面加async// 也可以用结构来承接axios返回数据const x = await axios.get('http://geek.itheima.net/v1_0/channels')// axios要配合await使用console.log(x);count.value = x.data.data.arrays // 把axios获取的数据赋值给前面的变量}

调用该函数后就得到了url里面的数据

await会暂停函数执行：当执行到await表达式时，函数的执行会被暂停，直到Promise解决（resolved）或拒绝（rejected）。

  

 在 Vue 3 中，使用 Axios 进行数据请求通常是放在 onMounted 生命周期钩子中。这个钩子会在组件实例被挂载后立即调用，非常适合进行初始数据获取。如果是点按钮来获取并渲染，就不用放在OnMounted函数里

onMounted(() => {

        // 在组件挂载后执行的代码

         });

<script setup>
import { useStudentStore } from '@/store';
import { onMounted } from 'vue';
const StudentStore = useStudentStore()
// 在组件挂载完成后调用getStudent()，就是要放在onMounted(() => {<fun>})里
onMounted(() => {StudentStore.getStudent()
})
</script><template><h1>这是son2</h1><ul><li v-for="(item, index) in StudentStore.prince" :key="index">{{ index + 1 }} {{ item }}</li></ul></template>

发送数据

Axios POST 请求参数结构：axios.post(url, data,{config{},…{}…})

  1. url:

    • 字符串：目标服务器的地址，如 https://api.example.com/resource。

  2. data（传得较多）:

    • 对象：将被作为请求体发送到服务器的数据。内容可以是任意数据类型（对象、数组、基本数据类型等），通常是 JSON 格式的对象。

    示例：

    { name: 'Alice', age: 30 }

  3. config (可选):

    • 配置对象，用于设置请求的具体行为。常用的配置项包括：
    • headers: 自定义请求头。

      headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer TOKEN' }

    • timeout: 请求超时的时间，单位是毫秒。timeout: 1000 // 一秒超时
    • params: URL 查询参数，会自动拼接到 URL 中。

      params: { userId: 1 }

    • responseType: 指定响应类型。

      responseType: 'json' // 默认是 json

    • validateStatus: 自定义请求状态码的成功范围。默认情况下，2xx 状态码会被视为成功。

      validateStatus: function (status) { return status >= 200 && status < 500; // 只接收 2xx 和 4xx 状态码 } 

const postfeedback = async() => {console.log(advice.value); // advice对象变量在函数外定义好，并用v-model与输入框绑定// 发送post请求并获得响应const resp = await axios.post('https://hmajax.itheima.net/api/feedback', advice.value)// await会暂停函数执行：当执行到await表达式时，函数的执行会被暂停，直到Promise解决（resolved）或拒绝（rejected）。alert(resp.data.message); // 后端发送的响应数据}

axios拦截器

token介绍：

在Vue 3中，使用axios拦截器可以帮助我们在请求发送之前或响应到达之后执行一些操作。这些操作可以包括设置请求头、处理错误、统一管理跳转等。

如何使用axios拦截器：

1. 请求拦截器：在请求发送之前执行，可以用来修改请求配置或添加额外的逻辑，例如添加token验证信息。

   import axios from 'axios';axios.interceptors.request.use(config => {// 在这里添加token或其他配置const token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;},error => {return Promise.reject(error); //会捕获错误并返回一个拒绝的 Promise});

2. 响应拦截器：在响应到达之后执行，可以用来处理响应数据或进行错误处理。

axios.interceptors.response.use(response => {// 对响应数据进行处理return response.data;},error => {// 对响应错误进行处理if (error.response && error.response.status === 401) {// 处理401错误，例如跳转到登录页面}return Promise.reject(error);});

   3. 移除拦截器：如果需要移除拦截器，可以使用`eject`方法。

   const myInterceptor = axios.interceptors.request.use(...);axios.interceptors.request.eject(myInterceptor);

4. 在Vue 3项目中设置axios实例：通常我们会创建一个axios实例，并在项目中全局使用。

// src/axios/index.jsimport axios from 'axios';const instance = axios.create({baseURL: 'http://your-api-url',timeout: 1000,});// 添加拦截器instance.interceptors.request.use(...);instance.interceptors.response.use(...);export default instance;

5. 在main.js中引入axios实例：

import { createApp } from 'vue';import App from './App.vue';import axios from './axios'; // 引入封装的axios实例const app = createApp(App);app.config.globalProperties.$axios = axios; // 将axios挂载到全局app.mount('#app');

6. 在组件中使用：

import { ref } from 'vue';export default {setup() {const data = ref(null);const error = ref(null);const fetchData = async () => {try {data.value = await this.$axios.get('/data');} catch (err) {error.value = err;}};fetchData();return { data, error };}}

通过上述步骤，你可以在Vue 3项目中灵活地使用axios拦截器来处理HTTP请求和响应。这样不仅可以简化代码，还可以提高项目的可维护性。

vue3中组合式API封装axios

在Vue 3中使用组合式API封装Axios，可以创建一个可复用的axios模块，这样可以在多个组件中轻松地使用相同的Axios配置和请求方法。以下是封装Axios的步骤：

1. 创建Axios实例

首先，创建一个Axios实例并配置通用的设置，如基础URL、超时时间、请求拦截器和响应拦截器。

如果是工程化封装axios，那么要在src文件夹下创建api文件夹，里面包含index.js（封装axios请求函数）和path.js（管理url地址）。在src文件夹下创建utils文件夹，里面包含配置axios（包含拦截器）的requset.js文件，导出封装好的axios并在api里封装axios函数

// src/utils/axios.js
import axios from 'axios';const axiosInstance = axios.create({baseURL: 'https://api.example.com',timeout: 10000, // 超时时间
});// 请求拦截器
axiosInstance.interceptors.request.use(config => {// 在发送请求之前做些什么，例如设置token、将数据转为JSON格式等config.headers['Authorization'] = 'Bearer your-token';return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
axiosInstance.interceptors.response.use(response => {// 对响应数据做点什么return response.status === 200 ? Promise.reslove(response) : Promise.reject(response)},error => {// 对响应错误做点什么return Promise.reject(error);}
);export default axiosInstance;

config对象包含了即将发送的HTTP请求的所有配置信息，包括method、headers、params、data等。这个对象是Axios请求配置的完整表示，你可以在拦截器中访问和修改它，以影响请求的行为。

error参数是一个函数，它在请求配置（config）准备过程中发生错误时被调用。这个错误处理函数接收一个错误对象作为参数，你可以在这个函数中定义错误处理逻辑。

config.headers['Authorization'] = 'Bearer your-token';：这是设置HTTP请求头中的Authorization字段，通常用于在HTTP请求中提供身份验证信息。在这种格式中，'Bearer your-token'是一个认证方案，它告诉服务器使用Bearer令牌（一种常用的令牌类型）来进行身份验证。 

 Axios 请求拦截器通常在发送请求之前可以做以下几件事情：

1. 添加请求头：可以在请求拦截器中添加认证令牌（如 JWT）或其他自定义请求头。

   axios.interceptors.request.use(config => {config.headers['Authorization'] = `Bearer ${token}`;return config;});

2. 修改请求参数：可以对请求的参数进行修改，比如转化数据格式、添加或删除某些字段等。

   axios.interceptors.request.use(config => {config.data = { ...config.data, extraParam: 'value' };return config;});

3. 显示加载状态：在请求开始时，可以显示一个加载动画或提示，以提高用户体验。

   axios.interceptors.request.use(config => {// 显示加载状态loadingIndicator.show();return config;});

4. 错误处理：虽然主要在响应拦截器中处理错误，但也可以在请求拦截器中对请求的参数进行校验，如果参数不符合要求，可以直接返回一个错误。

axios.interceptors.request.use(config => {if (!config.data.requiredField) {return Promise.reject(new Error('Required field is missing'));}return config;});

5. 记录请求日志：可以在请求发送之前记录日志，帮助调试和监控。

   axios.interceptors.request.use(config => {console.log('Request made with: ', config);return config;});

拦截器的功能非常强大，能够集中管理与请求相关的逻辑，提高代码的可维护性和可读性。


拦截器中error

error 表示请求拦截器或响应拦截器中的错误对象，用于描述请求过程中发生的错误。

作用

在响应拦截器中，如果请求失败，则会传递这个 error 对象，用于处理错误（如记录日志、显示错误信息、重定向等）。

console.error("请求失败:", error)：error 是捕获的错误对象，用于在控制台中输出详细的错误信息，帮助开发者了解请求失败的原因。

示例代码

下面是一个包含请求拦截器的示例，其中包括了error的使用：

import axios from 'axios';// 创建axios实例
const instance = axios.create({baseURL: 'https://api.example.com',timeout: 1000,
});// 添加请求拦截器
instance.interceptors.request.use(config => {// 在发送请求之前做些什么config.headers.Authorization = 'Bearer your-token';return config;},error => {// 对请求配置错误做些什么console.error('请求配置错误:', error);// 专门用于输出错误信息，旨在标识问题或异常情况。// 输出的错误信息通常以红色字体显示，更加突出，以便引起开发者的注意。// 可以在这里进行一些错误处理，例如提示用户alert('请求配置失败，请检查网络设置');// 抛出错误，阻止请求发送return Promise.reject(error);}
);export default instance;

在这个示例中，如果请求配置过程中发生错误，拦截器会打印错误信息到控制台，并弹出一个警告框提示用户。然后，使用Promise.reject抛出错误，这样请求就不会被发送。

Promise.reject(error) 是一个 JavaScript 方法，用于创建并返回一个状态为“拒绝”（rejected）的 Promise，其中 error 是拒绝的原因。

2. 创建Axios模块

然后，创建一个模块来封装Axios的常用方法，如get、post等。

// src/utils/http.js
import axios from './axios';const http = {get(url, params = {}) {return axios.get(url, { params });},post(url, data = {}) {return axios.post(url, data);},// 可以继续添加其他方法，如 put, delete 等
};export default http;

3. 在组件中使用封装的Axios

在组件中，你可以导入封装的Axios模块，并在setup函数中使用它。

// src/components/SomeComponent.vue
<template><div><h1>用户信息</h1><p>{{ userInfo }}</p></div>
</template><script>
import { ref, onMounted } from 'vue';
import http from '@/utils/http';export default {setup() {const userInfo = ref(null);const fetchUserInfo = () => {http.get('/user/info').then(data => {userInfo.value = data;}).catch(error => {console.error('请求失败:', error);});};onMounted(fetchUserInfo);return {userInfo,};},
};
</script>

4. 提供全局Axios实例（可选）

如果你希望在应用的任何地方都能方便地访问Axios实例，可以在应用的入口文件中提供它。

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import axiosInstance from './utils/axios';const app = createApp(App);app.config.globalProperties.$axios = axiosInstance; // 将axios添加到全局属性中app.mount('#app');

这样，你可以在任何组件中通过this.$axios访问Axios实例。

5. 使用Provide/Inject提供Axios实例（可选）

你还可以使用Vue的provide/inject API来提供Axios实例，使其在应用程序的特定部分可用。

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import axiosInstance from './utils/axios';const app = createApp(App);app.provide('axios', axiosInstance); // 提供axios实例app.mount('#app');

然后在需要的组件中注入它：

import { inject } from 'vue';export default {setup() {const axios = inject('axios');const userInfo = ref(null);const fetchUserInfo = () => {axios.get('/user/info').then(response => {userInfo.value = response.data;}).catch(error => {console.error('请求失败:', error);});};onMounted(fetchUserInfo);return {userInfo,};},
};

通过这种方式，你可以在Vue 3项目中封装并复用Axios，使得网络请求更加方便和一致。


http://www.mrgr.cn/news/43148.html

相关文章：

  • Java try-with-resources语句
  • 实时数仓分层架构超全解决方案
  • ThreadLocal详解：线程本地变量的艺术
  • 今日凌晨，ChatGPT重磅更新！—— 我心目中的终极AGI界面
  • 分布式事务（Seata-AT模式）
  • 外包功能测试干了4年，技术退步太明显了。。。。。​
  • 网站建设中，静态网页和动态网页分别是什么，有什么区别
  • vue2集成vuex实现网站统一数据管理
  • 蛋白质结构中原子坐标转换
  • swift使用代码结构解析
  • 大模型基础：基本概念、Prompt、RAG、Agent及多模态
  • 多系统萎缩患者的运动指南【健康守护，动出希望】
  • 涉案财务管理系统架构—交警相关系统——未来之窗行业应用跨平台架构
  • python：reportlab 将多个图片合并成一个PDF文件
  • IO操作同步、异步、阻塞、非阻塞之间的联系
  • 电源入口防护电路
  • ChatGPT-4o在临床医学日常工作、论文高效撰写与项目申报、数据分析与可视化、机器学习建模中的实践应用
  • 链表——单链表
  • 基于springboot的篮球竞赛预约平台
  • 《PMI-PBA认证与商业分析实战精析》第7章 解决方案评价