Vue 3 中安装并使用 Axios 详细步骤+样例代码详解

axios详细步骤

  1. 在集成终端打开,使用 npm 或 yarn 安装 Axios:

    npm install axios
    

    yarn add axios
    

    这将在您的项目中安装 Axios。

  2. 在您的 Vue 3 项目中创建一个用于发送 HTTP 请求的模块或文件,比如 http.js

  3. 在 http.js 文件中导入 Axios:

    import axios from 'axios';
    
  4. 创建一个 Axios 实例,并进行必要的配置。您可以根据需要添加全局的默认配置和拦截器等。以下是一个简单的示例:

    const http = axios.create({baseURL: 'http://api.example.com', // 设置基础 URL// 其他配置...
    });
    

    这里的 baseURL 是可选的,根据您的需要进行设置。

  5. 在需要发送请求的组件中导入 http.js 并使用创建的 Axios 实例发送请求。例如,在组件的方法中使用 http 对象发送 HTTP 请求:

    import http from './http';// ...methods: {fetchData() {http.get('/api/data').then(response => {// 处理成功的响应console.log(response.data);}).catch(error => {// 处理错误console.error(error);});}
    }
    

    这里的 /api/data 是您具体的请求路径,根据您的后端 API 进行设置。

axios代码详解

import axios from 'axios';

import axios from 'axios' 是 ES6 模块语法的一种形式,它用于导入一个名为 axios 的 JavaScript 模块。

axios 是一个流行的基于 Promise 的 HTTP 客户端,可以用于与后端服务器进行通信,发送 GET、POST、PUT、DELETE 等 HTTP 请求。它简化了向 RESTful API 发送异步请求的过程,并且可以在浏览器和 Node.js 环境下使用。如果要使用它,需要通过 NPM 或 CDN 引入相应的 axios 库或模块。

在这里,通过 import 语句导入了 axios 模块,可以在代码中调用 axios 的方法,发送 HTTP 请求获取数据。例如,可以在组件的 mounted 生命周期钩子函数中调用 axios.get() 方法发送一个 HTTP GET 请求来获取数据,然后将返回的数据设置到组件的数据中,从而使得数据能够渲染到页面上。

const requestInstance = axios.create({baseURL: 'http://106.14.120.88:6666/api/',});

这段代码使用 axios.create() 方法创建了一个名为 requestInstance 的 axios 实例。

通过 axios.create() 方法可以创建一个独立的 axios 实例,该实例可以具有自己的配置和默认选项,以及与全局的 axios 实例保持分离。这样可以灵活地使用不同的配置和选项来发送 HTTP 请求。

在这个实例中,配置对象包含了一个 baseURL 属性,它指定了请求的基础 URL。在这个例子中, baseURL 设置为 ‘http://106.14.120.88:6666/api/’,说明请求将会发送到远程服务器的 ‘http://106.14.120.88:6666/api/’ 路径下。

使用 baseURL 选项可以简化每个请求中的 URL 拼接,以及便于在多个请求中共享相同的基础 URL。

通过创建 requestInstance 实例,您可以在后续的代码中使用该实例来发送具有相同基础 URL 的请求,而无需重复设置每个请求的 URL。例如,可以使用 requestInstance.get('/users') 来发送一个 GET 请求到 ‘/api/users’ 路径。

requestInstance.interceptors.response.use(function (response) {const { code, message, data } = response.data;if (code === 100) {return data;}return Promise.reject(message);},function (error) {return Promise.reject(error);}
);

这段代码使用 requestInstance.interceptors.response.use() 方法给 requestInstance 实例添加了一个响应拦截器。

响应拦截器是在接收到响应数据之后,但在 .then() 或 .catch() 调用之前执行的函数。它允许您在处理响应数据之前对其进行任何必要的转换或处理。

具体到这段代码中,requestInstance.interceptors.response.use() 方法接受两个函数作为参数:一个用于处理成功的响应,另一个用于处理错误的响应。

第一个函数接收一个 response 参数,它表示从服务器返回的响应对象。在函数内部,使用解构赋值将 response.data 对象的 codemessage 和 data 属性分别赋给相应的变量。

然后,通过检查 code 是否等于 100 来确定响应的有效性。如果 code 为 100,意味着服务器返回了有效的数据,这时候我们将返回 data,即响应数据的主体部分。

如果 code 不等于 100,说明服务器返回的数据有错误,我们会使用 Promise.reject() 方法返回一个被拒绝的 Promise,并传入错误消息 message

第二个函数接收一个 error 参数,它表示请求过程中发生的错误。这个函数直接返回一个被拒绝的 Promise,并将错误对象传递给 Promise.reject() 方法。

通过设置这个响应拦截器,我们可以在每个请求的响应中进行一些通用的处理,例如根据不同的响应状态码进行不同的操作,或者统一处理响应的数据结构。

AddEmployee(Employee) {return requestInstance.post('Employee/AddEmployee', Employee);},

这段代码定义了一个名为 AddEmployee(Employee) 的函数,该函数用于向服务器发送一个 POST 请求来添加新员工。

函数内部使用了 requestInstance.post() 方法来发送请求。requestInstance 是之前创建的 axios 实例,通过该实例发送的请求会带有之前配置的 baseURL。

requestInstance.post() 方法接收两个参数:要发送的请求路径和要发送的数据。在这里,请求路径是 ‘Employee/AddEmployee’,相对于之前设置的 baseURL 进行拼接得到完整的 URL。

第二个参数 Employee 是要发送的数据,它作为一个对象传递给该方法。这个数据将会被序列化为请求的主体,并包含在请求中。

此函数返回 requestInstance.post() 方法的结果,即一个 Promise 对象。这个 Promise 对象将在请求成功时解析为服务器返回的数据,或在请求失败时被拒绝,并将错误信息传递给 .catch() 方法或后续的 .catch() 调用链。

在需要发送请求的组件中导入 http.js 并使用创建的 Axios 实例发送请求。例如,在组件的方法中使用 http 对象发送 HTTP 请求:const getAllEmployee = async () => {try {Employee.value = await http.GetAllEmployee();loading.value = false;console.log(Employee.value);} catch (error) {ElMessage({message: error,type: 'error',duration: 1000,onClose: () => {loading.value = false;},});}
};

这段代码定义了一个异步函数 getAllEmployee()。它使用了 async/await 语法来处理异步操作。

在该函数中,首先使用 try/catch 块来捕获可能发生的异常。在 try 块中,代码通过调用 http.GetAllEmployee() 方法来获取所有员工的数据,并将返回的结果赋值给 Employee.value 变量。

接下来,将 loading.value 设置为 false,表示加载完成,然后通过 console.log() 打印 Employee.value 的值。

如果在执行获取员工数据的过程中发生了错误,将会进入 catch 块。在 catch 块中,通过 ElMessage 组件显示错误消息,并将消息类型设为 ‘error’。设置了持续时间为 1000 毫秒,并在消息关闭后执行一个回调函数,将 loading.value 设置为 false,表示加载完成。

总体而言,这段代码的作用是异步获取所有员工的数据,并在获取成功时更新 Employee.value 变量的值,并在发生错误时显示错误消息,并更新 loading.value 的状态。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/582471.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

K8s实战-init容器

概念: 初始化容器的概念 比如一个容器A依赖其他容器,可以为A设置多个 依赖容易A1,A2,A3 A1,A2,A3要按照顺序启动,A1没有启动启动起来的 话,A2,A3是不会启动的,直到所有的静态容器全 部启动完毕…

Java并发编程(四)

ThreadLocal 1.ThreadLocal是什么 ThreadLocal类让每一个线程都拥有了自己的本地变量,这意味着每个线程都可以独立地、安全地操作这些变量,而不会影响其他线程。 ThreadLocal的常用API get():获取当前线程中与ThreadLocal对象关联的变量副…

Java EasyExcel 导入代码

Java EasyExcel 导入代码 导入方法 /*** 仓库库位导入** param req* param res* param files* throws Exception*/RequestMapping(value {"/import/line_store_locs"}, method {RequestMethod.POST})ResponseBodypublic void importStoreLoc(HttpServletRequest …

MySQL 索引、事务与存储引擎

MySQL 索引 索引的概念 索引是一个排序的列表,在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址(类似于C语言的链表通过指针指向数据记录的内存地址)。使用索引后可以不用扫描全表来定位某行的数据,而是先通过索引…

一种适合企业的大体量数据迁移方式

在企业进行数字化转型的过程中,数据迁移是一项至关重要的任务。无论是从旧系统到新系统、从本地数据中心到云端,还是在不同云服务提供商之间进行数据迁移,数据的顺利转移对业务的成功至关重要。 然而,随着数据体量的不断增加&…

[SWPUCTF 2021 新生赛]sql

[SWPUCTF 2021 新生赛]sql wp 输入 1 正常回显: ?wllm1 返回: Want Me? Cross the Waf Your Login name:xxx Your Password:yyy输入单引号引发报错: ?wllm1 返回: Want Me? Cross the Waf You have an error in your SQL s…

ios环境搭建_xcode安装及运行源码

目录 1 xcode 介绍 2 xcode 下载 3 xocde 运行ios源码 1 xcode 介绍 Xcode 是运行在操作系统Mac OS X上的集成开发工具(IDE),由Apple Inc开发。Xcode是开发 macOS 和 iOS 应用程序的最快捷的方式。Xcode 具有统一的用户界面设计&#xff0…

为什么IDEA建议去掉StringBuilder,而要使用“+”拼接字符串

在字符串拼接时应该都见过下面这种提示: 大家普遍认知中,字符串拼接要用StringBuilder,那为什么idea会建议你是用呢,那到底StringBuilder和有什么具体区别呢,我们一起来探究一下。 普通拼接 普通的几个字符串拼接成一…

0基础学习VR全景平台篇第132篇:曝光三要素—快门速度

上课!全体起立~ 大家好,欢迎观看蛙色官方系列全景摄影课程! 经过前面两节课的学习我们认识了曝光三要素中的感光度和光圈,这节课我们将一同去了解影响曝光的最后一个要素——快门速度。 (曝光三要素:感光度、光圈、…

YOLOv8算法优化:解决YOLOv8无法打印计算量(GFLOPs)的问题点

💡💡💡本文内容:解决YOLOv8无法打印计算量的问题点 💡💡💡本文提供:1)训练阶段自动打印计算量;2)提供离线打印计算量的代码; 1.计算量介绍 FLOPS:注意S是大写,是 “每秒所执行的浮点运算次数”(floating-point operations per second)的缩写。它常被用…

低信噪比环境下的语音端点检测

端点检测技术 是 语音信号处理 的关键技术之一为提高低信噪比环境下端点检测的准确率和稳健性,提出了一种非平稳噪声抑制和调制域谱减结合功率 归一化 倒谱距离的端点检测算法 1 端点检测 1-1 定义 定义:在 存在背景噪声 的情况下检测出 语音的起始点和…

2022年全球软件质量效能大会(QECon北京站2022)-核心PPT资料下载

一、峰会简介 当前,新一轮科技革命和产业变革正在重塑全球经济格局,以云计算为代表的新一代信息技术创新活跃,与实体经济深度融合,推动泛在连接、数据驱动、智能引领的数字经济新形式孕育而生。 新兴技术的出现给测试乃至整个软…

Vue(一):Vue 入门与 Vue 指令

Vue 01. Vue 快速上手 1.1 Vue 的基本概念 用于 构建用户界面 的 渐进性 框架 构建用户界面:基于数据去渲染用户看到的界面渐进式:不需要学习全部的语法就能完成一些功能,学习是循序渐进的框架:一套完整的项目解决方案&#x…

ftp服务器(hcia)

原理 客户端 对服务器的访问 传输和下载数据 FTP (File Transfer Protocol)–21端口 FTP传输文件有两种方法: 浏览器 软件 SFTP(Secure File Transfer Protocol)–22端口 SFTP增加了一个安全层,SFTP会把数据加密后进行传输,但更安全带来副…

VSCode 如何安装插件的历史版本

背景 在日常开发过程中,我们可能会遇到新版VSCode插件存在问题,无法正常工作的情况。这种情况下,一种可行的解决方案就是安装插件的历史版本。VSCode 插件默认安装的都是插件最新的版本,例如下面 vscode-styled-compoents 插件 本…

Kubeadmin实现k8s集群:

Kubeadmin来快速搭建一个k8s集群: 二进制搭建适合大集群,50台以上的主机, 但是kubeadm更适合中小企业的业务集群 环境: Master:20.0.0.71 2核4G 或者4核8G docker kubelet kubectl flannel Node1:20.…

ROS MoveIt!

MoveIt!是一个用于ROS的开源运动规划库,提供多种功能,包括用于运动规划的快速逆运动学分析、用于操纵的高级算法、机械手控制、动力学、控制器和运动规划。(通过提供一个GUI来协助MoveIt!所需的各种设置,它允许使用RViz进行视觉反…

TCP 滑动窗口

滑动窗口(Sliding window)是一种流量控制技术。早期的网络通信中,通信双方不会考虑网络的拥挤情况直接发送数据。由于大家不知道网络拥塞状况,同时发送数据,导致中间节点阻塞掉包,谁也发不了数据&#xff0…

MySQL数据库安装及管理

数据库的分类 1. 关系型数据库SQL 关系数据库系统是基于关系模型的数据库系统 关系模型的数据结构使用简单易懂的二维数据表 关系模型包含了实体(数据对象)、关系和属性三个要素 2. 非关系型数据库NoSQL 补充扩展: 关系型数据库典型代表:MySQL、Ma…

RustDesk连接客户端提示key不匹配 Key Mismatch无法连接(已解决)

环境: RustDesk1.1.9 服务端docker部署 问题描述: RustDesk连接客户端提示key不匹配 Key Mismatch无法连接 解决方案: 1.docker部署RustDesk服务检查配置 networks:rustdesk-net:external: falsevolumes:hbbr:hbbs:services:hbbs:container_name: rustdesk-hbbsport…