Vue3中使用axios

已于 2024-10-05 12:51:48 修改
阅读量653 收藏 27
点赞数 18
分类专栏： Vue3 文章标签： 前端 javascript 开发语言
于 2024-09-27 21:05:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80412275/article/details/142600552
版权

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.js
   import 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，使得网络请求更加方便和一致。

落霞的思绪
关注
专栏目录
vue3中使用axios
记录学习的一些知识，也希望这些记录总结能帮到需要的人！
02-25 4万+
vue3中使用axios 1.axios在vue3.x中的基础入门使用 在不涉及使用axios进行请求拦截以及响应拦截的场景下，axios的使用可以简化为以下步骤。 step1. 使用npm安装axios npm install axios step2. 我们将要使用的axios实例单独编写成一个js文件，文件夹可以建立在src/plugins/（自己选择建立在什么地方）。命名为： axiosInstance.js //axiosInstance.js //导入axios import axio
在 Vue 3 中使用 Axios 发送 POST 请求
HWL5679的博客
04-09 2709
import axios from 'axios';
VUE3中，使用Axios
故里2130
01-06 9096
axios是前后端数据交互的重要桥梁，理论和概念这里不再叙述了。可以看看官网。本例子，从简单到难，从初级使用，到高级封装。1.废话少说，先使用HBuilder X建立一个能运行的项目2.安装axios使用如下命令安装安装成功后3. 建立文件夹和文件，如图所示4.demoAxios.js中的代码，其他的选项可以自己增加5.使用在vue界面中，先导入，然后直接写api地址，其中api已经写好了。HelloWorld.vue代码，其中没用的代码已经删除了6.运行后，效果至此，简单的使用就完成了。
Vue3使用axios的配置教程
热门推荐
我的米饭
03-23 4万+
axios中文网站：axios-http.com/zh/ 一、安装axios npm install axios --save 二、配置axios，添加拦截器 在src目录下新建一个request文件夹，在里面新建index.ts（或者.js）文件，编辑代码如下： import axios from 'axios' // 创建一个 axios 实例 const service = axios.create({ baseURL: '/api', // 所有的请求地址前缀部分 timeout: 6000
vue3——使用axios
qq_45947664的博客
11-01 6112
浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。简单一点：可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。的(即同一套代码可以运行在浏览器和node.js中)。
vue3使用axios
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生
11-15 6490
1.cnpm install axios -S //安装axios 2.cnpm install qs -S //可以不装 用来格式化参数 3.在scr目录下新建http文件夹及index.js //index.js: import axios from 'axios' // import qs from "qs";//qs为序列化数据的js库 // axios.defaults.baseURL = '192.168.0.1' //设置请求头 axios.defaults.headers.post[
vue3中封装axios请求
前端-尔嵘
03-16 4641
需要注意的是，在实际应用中，我们可能还需要根据业务需求进一步封装不同类型的请求，例如 GET 请求、POST 请求等，以及处理请求错误等情况。
vue2、vue3中使用axios请求本地json数据的详细过程
Jeasu_0908的博客
07-09 2万+
研究背景 在我们平常写demo的时候难免需要自己模拟一些数据去调用，那么如何请求本地的json数据呢，下面将要从0开始，讲一下请求本地json数据的详细过程，途中遇到的问题及解决方法 技术选型 我们选择那种方式来请求数据呢，是要根据当前项目环境来选择，一般来说常用的是jquery的$.getJSON( ) 方法 和 ajax/axios ,由于当前vue工程是由vue-cli搭建的，我们 选用axios去请求 步骤： 1、安装axios npm install axios --save 2、在main.j
如何在Vue3中使用axios实现数据请求？
有我更精彩的博客
06-08 1789
Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。Axios 是一个基于 Promise 的 HTTP 客户端，它可以用于发送异步 HTTP 请求到 REST 终端并执行各种 CRUD 操作。在 Vue 3 中，我们可以很方便地使用 Axios 进行数据请求，从服务器获取数据并在界面中显示。本文将详细介绍如何在 Vue 3 中使用 Axios 实现数据请求，并提供相关的示例代码，以帮助您更加直观地理解和应用这一过程。
在vue组件中使用axios的方法
08-27
在Vue组件中使用Axios的方法 在Vue项目中，Axios是一个非常流行的 HTTP 客户端库，用于发送 HTTP 请求。那么，在Vue组件中如何使用Axios呢？下面我们将详细讲解如何在Vue组件中使用Axios。 首先，在使用Axios之前...
vue项目中使用axios上传图片等文件操作
11-27
在本文中，我们将详细探讨如何在Vue项目中使用axios进行文件上传。 首先，为了在项目中使用axios，我们需要安装它。有三种安装方式： 1. 使用npm：`npm install axios --save` 2. 使用bower：`bower install axios ...
解决vue2中使用axios http请求出现的问题
08-27
解决 Vue2 中使用 Axios HTTP 请求出现的问题 在 Vue 2 中使用 Axios 进行 HTTP 请求时，可能会遇到一些问题，如请求失败、状态码 404 等错误。本文将为读者分享解决这些问题的方法，并解释相关的知识点。 知识点 ...
前端的全栈混合之路Meteor篇：3.0新版本介绍
最新发布
分享有趣的、贴近生活的CS知识
10-01 1089
Meteor全栈框架3.0版本终于稳定下来了，它的效果约等于webpack+vue+express+socket.io+mongodb+npm+uniapp，学一个搞定全套，值得学习了解下，最后找到适合于自己的技术栈。
登录功能开发 P167重点
2303_81204446的博客
09-30 393
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 637
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1200
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 5898
Webpack 打包后文件过大，如何优化？
第十一章 【前端】调用接口（11.1）——Vite 环境变量
qdbest的专栏
09-29 155
Vite。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值