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

4.组件使用

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

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

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

到此这篇关于Vue3中Axios的使用-附完整代码的文章就介绍到这了,更多相关vue axios使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论