vue.js 前端 ajax 使用axios获取JSON文件数据（vue）

文章目录

目录 文章目录 前言 一、安装axios 二、编写json文件 三、创建一个AxiosJson.Vue文件 1.在创建好的vue项目中创建一个vue文件 2.使用Element Plus的走马灯组件 3.AxiosJson.Vue文件代码如下（复制粘贴即可放入即可）  4、注意事项 四、最终效果 总结

前言

axios是一个基于Promise的HTTP客户端库，用于发送HTTP请求。它可以在浏览器和Node.js环境中使用，并提供了许多强大而且易于使用的功能，使得进行HTTP通信变得简单、直观和高效。

axios的一些详细介绍：

支持浏览器和Node.js环境：axios可以在浏览器和Node.js环境中都使用。这意味着你可以在多种前端和后端开发场景中统一使用axios进行网络请求。 简单易用的API：axios提供了简洁、直观的API，使得发送HTTP请求变得非常容易。你可以使用各种HTTP方法（如GET、POST、PUT、DELETE等）发送请求，并可以设置请求头、请求参数等。 基于Promise的异步操作：axios基于Promise实现，可以处理异步操作。你可以使用.then和.catch方法来处理成功和失败的回调，或者使用ES8的async/await语法进行异步编程。 拦截器：axios提供了拦截器功能，你可以在请求发送前、响应接收后拦截和处理请求和响应。这使得你能够在请求发送或响应接收时进行全局的错误处理、认证授权等操作。 取消请求：axios支持取消请求的功能，这对于需要在请求发出后中止请求的场景非常有用。你可以创建一个取消令牌（Cancel Token），并在需要取消请求时调用相应的方法进行取消。 处理请求和响应数据：axios提供了一套灵活的机制来处理请求和响应数据。你可以使用拦截器进行数据的预处理、转换请求和响应的数据格式（如JSON、FormData等），并可以自定义错误处理逻辑。

一、安装axios

在项目中使用axios之前，需要先安装它。可以通过npm安装，在终端中输入以下命令：

npm install axios

二、编写json文件

在public文件创建存在json文件目录,照片文件则放入img文件夹中

三、创建一个AxiosJson.Vue文件，使用axios获取JSON数据

1.在创建好的vue项目中创建一个vue文件

2.使用Element Plus的走马灯组件展示数据

elementPlus中有许多美化的组件，优秀的前端页面必不可少，我们直接使用走马灯组件

3.AxiosJson.Vue文件代码如下（复制粘贴即可放入即可） 

注意：如果你的vue项目没有引入router，则将以下代码放入主入口App.vue,需要再script标签中引入import axios from "axios"，否则无法使用axios。

4、注意事项

如果没有引入elementPlus则需要引入，在项目中使用之前，需要先安装它。可以通过npm安装，在终端中输入以下命令：

npm install element-plus --save

之后再main.js文件中全局引入即可

四、最终效果

总结

axios是一个功能强大、易于使用和可扩展的HTTP客户端库。它简化了在浏览器和Node.js中进行HTTP通信的过程，提供了一致性的API和许多方便的功能，使得进行网络请求变得更加简单和高效。无论你是进行前端开发还是后端开发，axios都是一个很好的选择。

好文链接

 您阅读本篇文章共花了：