---

前言

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

axios的一些详细介绍：

1. 支持浏览器和Node.js环境：axios可以在浏览器和Node.js环境中都使用。这意味着你可以在多种前端和后端开发场景中统一使用axios进行网络请求。

2. 简单易用的API：axios提供了简洁、直观的API，使得发送HTTP请求变得非常容易。你可以使用各种HTTP方法（如GET、POST、PUT、DELETE等）发送请求，并可以设置请求头、请求参数等。

3. 基于Promise的异步操作：axios基于Promise实现，可以处理异步操作。你可以使用.then和.catch方法来处理成功和失败的回调，或者使用ES8的async/await语法进行异步编程。

4. 拦截器：axios提供了拦截器功能，你可以在请求发送前、响应接收后拦截和处理请求和响应。这使得你能够在请求发送或响应接收时进行全局的错误处理、认证授权等操作。

5. 取消请求：axios支持取消请求的功能，这对于需要在请求发出后中止请求的场景非常有用。你可以创建一个取消令牌（Cancel Token），并在需要取消请求时调用相应的方法进行取消。

6. 处理请求和响应数据：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都是一个很好的选择。