axios的使用

好开心332024-12-25 14:40

1、axios的基本使用

1.1、简介

说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。

Ajax(Asynchronous JavaScript and XML)：

异步网络请求。Ajax能够让页面无刷新的请求数据。

实现ajax的方式有多种，如jQuery 封装的ajax，原生的XMLHttpRequest ，以及axios。但各种方式都有利弊：

  • 原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦
  • jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架
  • Axios（ajax i/o system）：

这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。

axios具备以下特点：

在浏览器中创建XMLHttpRequest请求

在node.js中发送http请求

支持Promise API

拦截请求和响应

转换请求和响应数据

取消要求

自动转换JSON数据

1.2、安装

1.2.1、通过cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

1.3、基本使用

1.3.1、准备服务器

模拟服务器，这里使用json-server

（1）安装json-server
npm install -g json-server
（2）创建数据源

在空文件夹下创建JSON文件作为数据源，例如 db.json

{
  "list": [
    {
      "id": "1",
      "name": "唐僧",
      "age": 20,
      "address": "东土大唐"
    },
    {
      "id": "2",
      "name": "孙悟空",
      "age": 500,
      "address": "花果山"
    },
    {
      "id": "3",
      "name": "猪八戒",
      "age": 330,
      "address": "高老庄"
    },
    {
      "id": "4",
      "name": "沙悟净",
      "age": 200,
      "address": "流沙河"
    },
    {
      "id": "5",
      "name": "红孩儿",
      "age": 10,
      "address": "火焰山"
    }
  ]
}
（3）启动服务器

使用以下命令启动json-server，并将JSON文件作为参数传递给服务器。这将在本地计算机的3000端口上启动服务器，并将db.json文件中的数据暴露为RESTful API。

方式一、//db.json是文件名

json-server  db.json

方式二、

json-server --watch db.json

方式三、

跟db.json同级目录，创建package.json文件，配置别名

{
    "scripts":{
        "mock":"json-server --watch db.json"
    }
}

启动方式：npm run mock

1.3.2、各种请求方式

1.3.2.1、get请求

获取数据，请求指定的信息，返回实体对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/axios.js"></script>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <style>
      #warp {
        width: 400px;
        margin: 50px auto;
      }
      .showUser {
        width: 400px;
        margin: 10px auto;
        height: 260px;
        border: 1px solid red;
      }
      li {
        line-height: 2;
        background-color: pink;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="warp">
      <button onclick="getInfo()">get请求</button>
      <ul class="showUser"></ul>
    </div>
    <script>
      // get请求
      async function getInfo() {
        // 请求结果处理方法一：
        // axios.get("http://localhost:3000/list").then(
        //   (res) => {
        //     // 将请求到的结果进行渲染
        //     render(res.data);
        //   },
        //   (err) => {
        //     console.log(err);
        //   }
        // );
        // 请求结果处理方法二：
        // axios
        //   .get("http://localhost:3000/list")
        //   .then((res) => {
        //     // 将请求到的结果进行渲染
        //     render(res.data);
        //   })
        //   .catch((err) => {
        //     console.log(err);
        //   });
        // 请求结果处理方法三：推荐使用第三种
        try {
          let res = await axios.get("http://localhost:3000/list");
          render(res.data);
        } catch (error) {
          console.log(err);
        }
      }
      // 渲染函数
      function render(data) {
        let showUser = document.querySelector(".showUser");
        let str = "";
        data.forEach((item) => {
          str += `<li>${item.name}<a href='#'>删除</a></li>`;
        });
        showUser.innerHTML = str;
      }
    </script>
  </body>
</html>

此外get请求，还可以携带参数

// get请求带参数方式一
// try {
//   let res = await axios.get("http://localhost:3000/list?id=1");
//   render(res.data);
// } catch (error) {
//   console.log(err);
// }
// get请求带参数方式二
try {
  let res = await axios.get("http://localhost:3000/list", {
    params: {
      id: 2,
    },
  });
  render(res.data);
} catch (error) {
  console.log(err);
}
1.3.2.2、post请求：

向指定资源提交数据（例如表单提交或文件上传）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/axios.js"></script>
    <style>
      #warp {
        width: 400px;
        margin: 50px auto;
      }
      .showUser {
        width: 400px;
        margin: 10px auto;
        height: 260px;
        border: 1px solid red;
      }
      li {
        line-height: 2;
        background-color: pink;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="warp">
      <button onclick="postInfo()">post请求</button>
      <ul class="showUser"></ul>
    </div>
    <script>
      // post请求
      async function postInfo() {
        await axios.post("http://localhost:3000/list", 
        {
          name: "蜘蛛精",
          age: 200,
          address: "盘丝洞",
        });
        // 重新获取数据，渲染
        let res = await axios.get("http://localhost:3000/list");
        render(res.data);
        // console.log(res.data);
      }
      // 渲染函数
      function render(data) {
        let showUser = document.querySelector(".showUser");
        let str = "";
        data.forEach((item) => {
          str += `<li>${item.name}<a href='#'>删除</a></li>`;
        });
        showUser.innerHTML = str;
      }
    </script>
  </body>
</html>
1.3.2.3、put请求：

更新数据，从客户端向服务器传送的数据取代指定的文档的内容

会把更新的数据完全替代原数据，如果只修改了部分的数据，原数据其他内容都会丢失

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/axios.js"></script>
    <style>
      #warp {
        width: 400px;
        margin: 50px auto;
      }
      .showUser {
        width: 400px;
        margin: 10px auto;
        height: 260px;
        border: 1px solid red;
      }
      li {
        line-height: 2;
        background-color: pink;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="warp">
      <button onclick="putInfo()">put请求-修改数据</button>
      <ul class="showUser"></ul>
    </div>
    <script>
      // put请求
      async function putInfo() {
        let res = await axios.put("http://localhost:3000/list/1", {
          name: "玉皇大帝",
        });
        // 渲染
        getData()
      }
      // 重新获取数据，渲染
      async function getData() {
        let res = await axios.get("http://localhost:3000/list");
        render(res.data);
      }
      // 渲染函数
      function render(data) {
        let showUser = document.querySelector(".showUser");
        let str = "";
        data.forEach((item) => {
          str += `<li>${item.name}<a href='#'>删除</a></li>`;
        });
        showUser.innerHTML = str;
      }
    </script>
  </body>
</html>
1.3.2.4、patch请求：

更新数据，是对put方法的补充，用来对已知资源进行局部更新

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/axios.js"></script>
    <style>
      #warp {
        width: 400px;
        margin: 50px auto;
      }
      .showUser {
        width: 400px;
        margin: 10px auto;
        height: 260px;
        border: 1px solid red;
      }
      li {
        line-height: 2;
        background-color: pink;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="warp">
      <button onclick="patchInfo()">patch请求-修改数据</button>
      <ul class="showUser"></ul>
    </div>
    <script>
      // patch请求
      async function patchInfo() {
        let res = await axios.patch("http://localhost:3000/list/2", {
          name: "王母娘娘",
        });
        // 渲染
        getData();
      }
      // 重新获取数据，渲染
      async function getData() {
        let res = await axios.get("http://localhost:3000/list");
        render(res.data);
      }
      // 渲染函数
      function render(data) {
        let showUser = document.querySelector(".showUser");
        let str = "";
        data.forEach((item) => {
          str += `<li>${item.name}<a href='#'>删除</a></li>`;
        });
        showUser.innerHTML = str;
      }
    </script>
  </body>
</html>
1.3.2.5、delete请求：

请求服务器删除指定的数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/axios.js"></script>
    <style>
      #warp {
        width: 400px;
        margin: 50px auto;
      }
      .showUser {
        width: 400px;
        margin: 10px auto;
        height: 260px;
        border: 1px solid red;
      }
      li {
        line-height: 2;
        background-color: pink;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="warp">
      <button onclick="deleteInfo()">delet请求-修改数据</button>
      <ul class="showUser"></ul>
    </div>
    <script>
      // delete请求
      async function deleteInfo() {
        let res = await axios.delete("http://localhost:3000/list/1");
        // 渲染
        getData();
      }
      // 重新获取数据，渲染
      async function getData() {
        let res = await axios.get("http://localhost:3000/list");
        render(res.data);
      }
      // 渲染函数
      function render(data) {
        let showUser = document.querySelector(".showUser");
        let str = "";
        data.forEach((item) => {
          str += `<li>${item.name}<a href='#'>删除</a></li>`;
        });
        showUser.innerHTML = str;
      }
    </script>
  </body>
</html>

1.3.3、axios的配置

配置的优先级为：请求配置 > 实例配置 > 全局配置

1.3.3.1、全局配置
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/axios.js"></script>
  </head>
  <body>
    <button id="btn" onclick="getData()">发送请求</button>
    <script>
      //配置全局的超时时长
      axios.defaults.timeout = 2000;
      //配置全局的基本URL
      axios.defaults.baseURL = "http://localhost:3000";
      async function getData() {
        try {
          let res1 = await axios.get("/list");
          let res2 = await axios.get("/user");
          console.log(res1.data);
          console.log(res2.data);
        } catch (error) {
          console.log(error);
        }
      }
    </script>
  </body>
</html>
1.3.3.2、实例配置

在一个项目中，我们会有很多不同的请求，如果都用axios去请求，很容易造成冲突，所以我们可以去创建axios的实例，通过不同的实例去请求，配置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/axios.js"></script>
  </head>
  <body>
    <button id="btn" onclick="getData()">发送请求</button>
    <script>
      async function getData() {
        // 创建实例1，创建同时配置
        let instance = axios.create({
          baseURL: "http://localhost:3000",
          timeout: 2000,
        });

        let res = await instance.get("/list");
        console.log(res.data);

        // 创建实例2，现创建，再配置
        let instance2 = axios.create();
        instance2.defaults.timeout = 2;
        instance2.defaults.baseURL = "http://localhost:3000";

        let res2 = await instance.get("/user");
        console.log(res2.data);
      }
    </script>
  </body>
</html>

axios实例常用配置：

    • baseURL 请求的域名，基本地址，类型：String
    • timeout 请求超时时长，单位ms，类型：Number
    • url 请求路径，类型：String
    • method 请求方法，类型：String
    • headers 设置请求头，类型：Object
    • params 请求参数，将参数拼接在URL上，类型：Object
    • data 请求参数，将参数放到请求体中，类型：Object
1.3.3.3、请求配置
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/axios.js"></script>
  </head>
  <body>
    <button id="btn" onclick="getData()">发送请求</button>
    <script>
      async function getData() {
        let res = await axios.get("http://localhost:3000/list", {
          timeout: 2000,
        });
        console.log(res.data);
      }
    </script>
  </body>
</html>

1.3.4、axios的拦截器

axios给我们提供了两大类拦截器

请求方向的拦截（成功请求，失败请求）

响应方向的拦截（成功的，失败的）

拦截器的作用，用于我们在网络请求的时候，在发起请求或者响应时对操作进行处理

例如：发送请求时，可以添加网页加载的动画，或认证token，强制用户先登录再请求数据

响应的时候，可以结束网页加载的动画，或者对响应的数据进行处理

1.3.4.1、请求拦截器
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/axios.js"></script>
  </head>
  <body>
    <button id="btn" onclick="getData()">发送请求</button>
    <script>
      // 请求拦截器
      async function getData() {
        axios.interceptors.request.use(
          (config) => {
            // 发生请求前的一系列的处理
            console.log("开启加载动画");
            console.log("认证是否有token，如果没有，要去登录");
            return config; //拦截后的放行
          },
          (err) => {
            // 请求错误处理
            return Promise.reject(err);
          }
        );
        let res = await axios.get("http://localhost:3000/list");
        console.log(res.data);
      }
    </script>
  </body>
</html>
1.3.4.2、相应拦截器
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/axios.js"></script>
  </head>
  <body>
    <button id="btn" onclick="getData()">发送请求</button>
    <script>
      // 响应拦截器
      async function getData() {
        axios.interceptors.response.use(
          (config) => {
            // 数据回来前的一系列的处理
            console.log("关闭加载动画");
            console.log("对数据进行一些数据");
            return config.data; //拦截后的放行
          },
          (err) => {
            // 响应错误处理
            return Promise.reject(err);
          }
        );
        let res = await axios.get("http://localhost:3000/list");
        console.log(res.data);
      }
    </script>
  </body>
</html>
1.3.4.3、取消拦截
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/axios.js"></script>
  </head>
  <body>
    <button id="btn" onclick="getData()">发送请求</button>
    <script>
      // 请求拦截器
      async function getData() {
        let instance = axios.create();
        instance.interceptors.request.use(
          (config) => {
            // 发生请求前的一系列的处理
            console.log("开启加载动画");
            console.log("认证是否有token，如果没有，要去登录");
            return config; //拦截后的放行
          },
          (err) => {
            // 请求错误处理
            return Promise.reject(err);
          }
        );

        // 取消拦截
        axios.interceptors.request.eject(instance);

        let res = await axios.get("http://localhost:3000/list");
        console.log(res.data);
      }
    </script>
  </body>
</html>

2、Vue中axios的使用

2.1、基本使用

2.1.1、npm安装

终端安装：

 npm install axios

2.1.2、在Vue原型上配置$axios

在vue项目的main.js文件中引入axios

// 导入axios
import axios from 'axios'
// 将axios放到Vue原型上，这样vm，vc身上就都有axios了
Vue.prototype.$axios=axios

2.1.3、在组件中使用：

<button @click="getDate">点击发送请求</button>

<script>
export default {
  name: 'App',
  methods: {
    async getDate() {
      let res = await this.$axios.get('http://localhost:3000/list')
      console.log(res.data);
    }
  }
}
</script>

2.2、一次封装

如果是多个组件都需要发送请求，而且每次请求前，我们都要进行一些验证处理等，可以进行简单封装

2.2.1、封装request.js

src/utils创建request.js

/* 封装axios用于发送请求 */
import axios from "axios";

/*
(1)request 相当于 Axios 的实例对象
(2)为什么要有request,而不是直接用axios
  * 项目开发中，有可能会有两个基地址
  * 不同的接口配置不同（有的要token,有的不要token）
*/
const request = axios.create({
  baseURL: "http://localhost:3000", // 设置基地址
  timeout: 2000, // 请求超时：当2s没有响应就会结束请求
});

// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
request.interceptors.request.use(
  function (config) {
    // 发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
    // 例如1
    config.data = JSON.stringify(config.data); // 数据转化,也可以使用qs转换
    // 例如2
    config.headers = {
      "Content-Type": "application/x-www-form-urlencoded", // 配置请求头
    };
    // 例如3
    //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
    const token = getCookie("名称"); // 这里取token之前，你肯定需要先拿到token,存一下
    if (token) {
      config.params = { token: token }; // 如果要求携带在参数中
      config.headers.token = token; // 如果要求携带在请求头中
    }
    
     return config; //拦截后的放行
  }, 
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    console.log('关闭请求数据动画');
    console.log('对数据进行处理');
    return response.data; //只要响应对象中的数据
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default request;

第一次封装，引入了基地址与拦截器

2.2.2、组件中使用

<script>
import request from '../utils/request'
export default {
    name: 'ShowList',
    methods: {
        async getList() {
            // 基本路径已经配置过
            let res = await request.get('/list')
            //这里的res也是响应拦截器里处理之后的结果
            console.log(res);
        }
    }
}
</script>

<script>
import request from '@/utils/request';
export default {
    name: 'ShowUser',
    methods: {
        async getUser() {
            let res = await request.get('/user')
            console.log(res);
        }
    }

}
</script>

2.3、二次封装

项目当中会有很多的页面，如果每个页面中都会多次请求，将我们的请求都写在对应的页面中，比较难以维护，所以可以将请求再次进行封装，类似如下效果：

src/apis/showList.js

// 导入一次封装的request
import request from "@/utils/request";
// 请求list数据
export function getListInfo1() {
  return request.get("/list");
}
// 请求user数据
export function getUserInfo1() {
  return request.get("/user");
}

showList.vue

<script>
import { getListInfo1, getUserInfo1 } from '../apis/showList'
export default {
    name: 'ShowList',
    methods: {
        async getList1() { 
          //	调用请求函数
            let res = await getListInfo1()
            console.log(res);
        },
        async getUser1() {
            let res = await getUserInfo1()
            console.log(res);
        }
    }
}
</script>
相关推荐
bryant_meng27 分钟前
【python】OpenCV—Image Moments
开发语言·python·opencv·moments·图片矩
若亦_Royi1 小时前
C++ 的大括号的用法合集
开发语言·c++
资源补给站2 小时前
大恒相机开发（2）—Python软触发调用采集图像
开发语言·python·数码相机
m0_748247552 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
6.942 小时前
Scala学习记录 递归调用 练习
开发语言·学习·scala
m0_748255023 小时前
前端常用算法集合
前端·算法
FF在路上3 小时前
Knife4j调试实体类传参扁平化模式修改：default-flat-param-object: true
java·开发语言
真的很上进3 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境？
java·前端·javascript·css·react.js·vue·html
web130933203983 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2343 小时前
Echarts连接数据库，实时绘制图表详解
前端·数据库·echarts
热门推荐
0119个Web前端交互式3D JavaScript框架和库02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07【一文读懂】NTN（非地面网络）技术介绍08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10ZZ038 物联网应用与服务赛题第J套