js高级axios的使用

原创已于 2025-02-13 16:44:05 修改

· 1k 阅读

15 ·

版权

文章标签：

#javascript #开发语言 #ecmascript #es6 #前端

于 2025-02-13 16:39:11 首次发布

JavaScript 同时被 2 个专栏收录

107 篇文章

订阅专栏

JavaScript详解

30 篇文章

订阅专栏

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引入

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 --port 3001"

}

启动方式：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.1、get请求

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

<!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>