文章目录
- 目录
- 文章目录前言一、安装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。
<template> <el-card class="box-card" style="margin-top: 30px"> <div class="block text-center"> <span class="demonstration" >加油！IKUN</span > <el-carousel :interval="2000" type="card" height="150 px"> <el-carousel-item v-for="item in imgObj" :key="item"> <img :src="'../img/'+item.imgPath" style="height: 150px"> </el-carousel-item> </el-carousel> </div> </el-card> </template> <script> import axios from "axios"; export default { name: "AxiosJson", data(){ return{ imgObj : [] } }, created() { axios.get("/static/mock/rotationChart.json").then(require => { console.log(require.data.success.data) this.imgObj = require.data.success.data }).catch(function (error){ console.log(error) }) } } </script> <style scoped> .demonstration { color: var(--el-text-color-secondary); } .el-carousel__item h3 { color: #475669; opacity: 0.75; line-height: 150px; margin: 0; text-align: center; } .el-carousel__item:nth-child(2n) { background-color: #99a9bf; } .el-carousel__item:nth-child(2n + 1) { background-color: #d3dce6; } </style>
4、注意事项
如果没有引入elementPlus则需要引入，在项目中使用之前，需要先安装它。可以通过npm安装，在终端中输入以下命令：
npm install element-plus --save
之后再main.js文件中全局引入即可
四、最终效果
总结
axios是一个功能强大、易于使用和可扩展的HTTP客户端库。它简化了在浏览器和Node.js中进行HTTP通信的过程，提供了一致性的API和许多方便的功能，使得进行网络请求变得更加简单和高效。无论你是进行前端开发还是后端开发，axios都是一个很好的选择。
