Vue3中Axios的使用-附完整代码

前言

首先介绍一下什么是axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests

官方网站：Axios中文文档 | Axios中文网

目前官方最新版本1.8.4

---

一、Axios优势

1.简单易用

Axios提供了简洁一致的API，使得发送HTTP请求变得非常容易。无论是GET、POST、PUT还是DELETE等请求，都可以通过简洁的语法轻松实现

2.支持Promise

Axios基于Promise实现，使得我们可以使用更加现代化的异步编程方式。通过使用Promise，我们可以更好地处理异步请求，避免回调地狱和代码的混乱。

3.拦截器功能

Axios提供了请求和响应拦截器的功能，可以在请求发送前和响应返回后进行一些额外的处理。这使得我们能够在请求过程中进行一些自定义的操作，比如添加请求头、错误处理等。

4.浏览器和Node.js支持

Axios既可以在浏览器环境下运行，也可以在Node.js环境中使用。这使得我们可以在前后端开发中都能轻松使用同一套API，提高开发效率。

5.自动转换JSON数据

Axios可以自动转换请求和响应中的JSON数据，使得数据处理更加方便。例如，当我们发送一个POST请求时，Axios会自动将JavaScript对象转换为JSON字符串。

二、安装

我这里使用的编译器是VSCode  只需要将你的项目文件在集成终端打开输入安装指令即可

npm install axios

下载完之后可以在 package.json中查看是否下载成功

三、使用步骤

1.创建文件夹

由于我们这里使用的是二次封装的写法。所以需要在src文件夹下创建一个API文件夹

在API文件夹中创建两个JS文件，一个名为api.js,另一个名为request.js

 

2.创建Axios对象

在api.js文件中编写以下代码 

//第一步导入Axios库
import axios from "axios";
//创建一个Axios对象
const request = axios.create({baseURL:"xxxxxxx",timeout: 5000 
})
export default request

• baseURL:基础路径，默认是/ ，这里一般写的是后端的接口地址。如果是本地json数据的话，这里写的就是你Vue启动时候的默认地址。

• timeout:请求超时，这里设置的是5000毫秒

• export default：将request模块导出

3.封装请求方法 

在request.js中编写以下代码

//引入request模块
import request from "./api";
export function userlogin(data){return request({url:'xxxxxx',method:'xxxx',data:data})
}

• url:后端方法接口，如果是本地json数据的话，这里写的就是你json文件的路径
• method:请求方法。下面列表中是对于各种请求方法的介绍以即描述
• data:向后端发送的数据。如果是GET方法的话，这里的配置项要变成params

序号	方法	描述
1	GET	从服务器获取资源。用于请求数据而不对数据进行更改。例如，从服务器获取网页、图片等。
2	POST	向服务器发送数据以创建新资源。常用于提交表单数据或上传文件。发送的数据包含在请求体中。
3	PUT	向服务器发送数据以更新现有资源。如果资源不存在，则创建新的资源。与 POST 不同，PUT 通常是幂等的，即多次执行相同的 PUT 请求不会产生不同的结果。
4	DELETE	从服务器删除指定的资源。请求中包含要删除的资源标识符。
5	PATCH	对资源进行部分修改。与 PUT 类似，但 PATCH 只更改部分数据而不是替换整个资源。
6	HEAD	类似于 GET，但服务器只返回响应的头部，不返回实际数据。用于检查资源的元数据（例如，检查资源是否存在，查看响应的头部信息）。
7	OPTIONS	返回服务器支持的 HTTP 方法。用于检查服务器支持哪些请求方法，通常用于跨域资源共享（CORS）的预检请求。
8	TRACE	回显服务器收到的请求，主要用于诊断。客户端可以查看请求在服务器中的处理路径。
9	CONNECT	建立一个到服务器的隧道，通常用于 HTTPS 连接。客户端可以通过该隧道发送加密的数据。

4.组件使用

在对应Vue组件中引入封装好的方法

<script setup>
//引入封装好的方法
import { userlogin } from '@/API/request'
userlogin().then((res) =>{console.log(res.data)})</script>

• res.data:通过接口获取的数据 

---