当前位置： 首页 > article >正文

axios的使用总结

article 2025/1/22 10:44:31

一、Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。在 Vue 项目中，它主要用于发送 HTTP 请求来获取数据（如从 API 获取数据）或者提交数据（如用户登录、注册等表单数据）。

二、安装 Axios

  • 在 Vue 项目中，可以通过 npm 或者 yarn 来安装 Axios。
  • 使用 npm 安装：npm install axios。
  • 使用 yarn 安装：yarn add axios。

三、基本使用方法

1. 引入 Axios

  • 在需要使用 Axios 的 Vue 组件中，可以通过以下方式引入：
  • 如果是在一个较大的项目中，也可以在main.js（Vue 项目的入口文件）中全局引入 Axios，这样所有的组件都可以直接使用它。例如：

javascript

import axios from 'axios';
Vue.prototype.$axios = axios;

然后在组件中就可以通过this.$axios来访问 Axios。

2. 发送 GET 请求

基本的 GET 请求示例：

javascript

axios.get('https://api.example.com/data')
   .then((response) => {
        console.log(response.data);
    })
   .catch((error) => {
        console.error(error);
    });

  • 上述代码向https://api.example.com/data发送一个 GET 请求。如果请求成功，服务器返回的数据可以通过response.data获取；如果出现错误（如网络问题或者服务器返回错误状态码），错误信息会被catch块捕获。
  • 带参数的 GET 请求：
  • javascript
axios.get('https://api.example.com/data', {
    params: {
        id: 1,
        name: 'John'
    }
})
   .then((response) => {
        console.log(response.data);
    })
   .catch((error) => {
        console.error(error);
    });

这里通过params对象传递查询参数，Axios 会自动将这些参数拼接在 URL 后面，例如请求的 URL 可能会变成https://api.example.com/data?id=1&name=John。

3. 发送 POST 请求

  • 基本的 POST 请求示例：

javascript

axios.post('https://api.example.com/data', {
    key: 'value'
})
   .then((response) => {
        console.log(response);
    })
   .catch((error) => {
        console.error(error);
    });
  • 上述代码向https://api.example.com/data发送一个 POST 请求，并且携带了一个数据对象{key: 'value'}。这个数据对象通常是要提交给服务器的数据，比如表单数据。
  • 发送 JSON 数据的 POST 请求：
  • javascript
const data = {
    username: 'user1',
    password: '123456'
};
axios.post('https://api.example.com/login', data, {
    headers: {
        'Content - Type': 'application/json'
    }
})
   .then((response) => {
        console.log(response);
    })
   .catch((error) => {
        console.error(error);
    });

这里通过设置headers中的Content - Type为application/json，告诉服务器发送的数据是 JSON 格式的。

四、拦截器

  1. 响应拦截器的基本概念

    • 响应拦截器是 Axios 提供的一个强大功能，用于在服务器响应到达客户端（浏览器或 Node.js 应用）后对响应进行统一处理。它允许你在每个请求返回数据时执行一些通用的操作，而不是在每个请求的then方法中重复相同的代码。
    • 其核心是axios.interceptors.response.use方法，这个方法接受两个函数作为参数，分别用于处理成功的响应和失败的响应。

  2. 成功响应的处理

    • 示例

javascript

axios.interceptors.response.use((response) => {
    // 对响应数据做点什么
    console.log('响应成功，状态码:', response.status);
    return response;
}, (error) => {
    // 处理错误响应的代码
});

  • 解释：当服务器返回的响应状态码在2xx范围内（通常表示成功）时，会调用第一个函数。在这个函数中，你可以对response对象进行各种操作。例如，你可以打印响应的状态码（如response.status），也可以对response.data（服务器返回的数据）进行格式转换、数据过滤等操作。最后，一定要返回response对象，这样后续的then方法（如果有的话）才能正常获取到完整的响应。

  1. 错误响应的处理
    • 示例

javascript

axios.interceptors.response.use((response) => {
    return response;
}, (error) => {
    console.log('响应出错，状态码:', error.response.status);
    if (error.response.status === 401) {
        // 例如，当返回401状态码（未授权）时，跳转到登录页面
        router.push('/login');
    } else if (error.response.status === 404) {
        console.log('资源未找到');
    }
    return Promise.reject(error);
});

  • 解释：当服务器返回的响应状态码不在2xx范围内（通常表示出错）时，会调用第二个函数来处理错误。error对象包含了详细的错误信息，其中error.response是一个包含响应数据的对象，包括状态码（error.response.status）、响应头（error.response.headers）和服务器返回的数据（error.response.data）等。
  • 可以根据不同的状态码进行不同的操作。如当状态码为401时，可能表示用户未授权，这时可以通过router.push跳转到登录页面。当状态码为404时，可能表示资源未找到，你可以在控制台打印相关提示。最后，需要返回一个被拒绝的Promise（Promise.reject(error)）来传递错误信息，这样如果在请求链中有后续的catch方法，就可以捕获到这个错误。

  1. 多个响应拦截器的使用
    • 可以添加多个响应拦截器，它们会按照添加的顺序依次执行。例如：

javascript

axios.interceptors.response.use((response) => {
    // 第一个拦截器对响应数据进行初步处理
    console.log('第一个拦截器：响应成功，状态码:', response.status);
    return response;
});
axios.interceptors.response.use((response) => {
    // 第二个拦截器对响应数据进行进一步处理
    console.log('第二个拦截器：响应成功，状态码:', response.status);
    return response;
});

  • 解释：在这个例子中，当请求成功返回时，首先会执行第一个响应拦截器中的代码，然后再执行第二个响应拦截器中的代码。这种方式可以让你对响应进行分层处理，比如第一个拦截器用于数据格式的初步检查，第二个拦截器用于数据的深度处理。不过需要注意的是，如果在前面的拦截器中返回了一个新的Promise或者修改了response对象，会影响后面拦截器接收到的参数。

除了响应拦截器，Axios还有哪些常用的拦截器？

如何在Axios中取消一个正在进行的请求？

详细介绍一下Axios的并发请求是如何实现的？

1. 请求拦截器

  • 请求拦截器可以在请求发送之前对请求进行一些操作，比如添加认证信息、修改请求头、显示加载动画等。
  • javascript
axios.interceptors.request.use((config) => {
    // 在发送请求之前做些什么，例如添加token到请求头
    const token = localStorage.getItem('token');
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
}, (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
});
  • 在上述代码中，axios.interceptors.request.use方法用于添加请求拦截器。它接收两个函数作为参数，第一个函数用于处理请求配置（config），第二个函数用于处理请求错误。

2. 响应拦截器

        响应拦截器可以在接收到服务器响应后对响应进行处理，比如检查响应状态码、处理错误信息、隐藏加载动画等。

javascript

axios.interceptors.response.use((response) => {
    // 对响应数据做点什么
    return response;
}, (error) => {
    // 对响应错误做点什么
    if (error.response.status === 401) {
        // 例如，当返回401状态码（未授权）时，跳转到登录页面
        router.push('/login');
    }
    return Promise.reject(error);
});
  • 同样，axios.interceptors.response.use方法用于添加响应拦截器，它也接收两个函数，分别用于处理正常响应和响应错误。

五、并发请求

  • Axios 可以同时发送多个请求，使用axios.all方法。例如:

javascript

const request1 = axios.get('https://api.example.com/data1');
const request2 = axios.get('https://api.example.com/data2');
axios.all([request1, request2])
   .then(axios.spread((response1, response2) => {
        console.log(response1.data);
        console.log(response2.data);
    }))
   .catch((error) => {
        console.error(error);
    });
  • 上述代码同时发送了两个 GET 请求，当所有请求都成功返回后，axios.spread函数会将各个请求的响应作为参数传递给回调函数，这样就可以分别处理每个响应的数据。

六、取消请求

        有时候需要取消正在进行的请求，Axios 提供了一种方法来实现。首先，需要通过CancelToken来创建一个取消令牌。

javascript

const source = axios.CancelToken.source();
axios.get('https://api.example.com/data', {
    cancelToken: source.token
})
   .then((response) => {
        console.log(response.data);
    })
   .catch((thrown) => {
        if (axios.isCancel(thrown)) {
            console.log('Request canceled', thrown.message);
        } else {
            console.error(thrown);
        }
    });
// 取消请求
source.cancel('Operation canceled by the user');
  • 在上述代码中，axios.CancelToken.source()创建了一个取消令牌的源，通过将cancelToken属性添加到请求配置中，可以将这个令牌与请求关联起来。当调用source.cancel方法时，就可以取消对应的请求。并且在catch块中，可以通过axios.isCancel函数来判断是否是因为取消请求而导致的错误。

总结一下Axios的post请求的基本用法

  1. 基本 POST 请求格式
    • 首先需要引入 Axios，在组件中可以使用import axios from 'axios';引入。
    • 基本的 POST 请求示例如下：

javascript

axios.post('https://api.example.com/data', {
    key: 'value'
})
  .then((response) => {
        console.log(response);
    })
  .catch((error) => {
        console.error(error);
    });

  • 这里axios.post方法接收两个主要参数。第一个参数是请求的 URL（如https://api.example.com/data），第二个参数是要发送的数据（如{key: 'value'}），这个数据通常是要提交给服务器的数据，比如表单数据。当请求成功时，在then块中可以通过response对象获取服务器返回的信息；如果请求出错，catch块会捕获错误并打印错误信息。

  1. 发送 JSON 数据的 POST 请求
    • 当需要发送 JSON 格式的数据时，需要设置请求头中的Content - Type为application/json。示例如下：

javascript

const data = {
    username: 'user1',
    password: '123456'
};
axios.post('https://api.example.com/login', data, {
    headers: {
        'Content - Type': 'application/json'
    }
})
  .then((response) => {
        console.log(response);
    })
  .catch((error) => {
        console.error(error);
    });
  • 首先定义了要发送的 JSON 数据对象（如data），然后在axios.post方法的第三个参数中设置headers。通过将Content - Type设置为application/json，告诉服务器发送的数据是 JSON 格式的。同样，请求成功后在then块处理返回信息，出错则在catch块捕获错误。

http://www.kler.cn/a/513377.html

相关文章：

  • 基于python的博客系统设计与实现
  • 【计算机网络】传输层协议TCP与UDP
  • CentOS9 安装Docker+Dpanel+onlyoffice（https、更改字体、字号、去除限制）的避坑笔记
  • ChromeOS 132 版本更新
  • 如何使用MaskerLogger防止敏感数据发生泄露
  • jlatexmath-android如何实现自定义渲染字符
  • Python的泛型(Generic)与协变(Covariant)
  • 总结研究ChatGPT提示词分享
  • 【人工智能】Python常用库-Keras：高阶深度学习 API
  • LabVIEW智能胎压监测
  • ARM-V9 CCA/RME QEMU环境搭建
  • 【leetcode 26】28.找出字符串中第一个匹配项的下标 | 实现 strStr()==❗不会❗==
  • Java数据结构——优先队列
  • 2025牛客寒假训练营1【代码】 A B D E G H J M
  • 线性回归笔记1-4
  • java依赖问题
  • VBA语言的区块链
  • 人工智能技术在冷链物流行业的应用前景
  • Java Web开发高级——单元测试与集成测试
  • Yearning开源MySQL SQL审核平台
  • 稳定的通信桥梁，CCLINKIE转ModbusTCP网关实现AGV运输的光速效应
  • 基于Python的多元医疗知识图谱构建与应用研究（上）
  • 基于Hadoop MapReduce的WordCount任务实现与部署
  • 什么是可信数据空间？有什么作用？
  • matlab构造线性相位FIR滤波器
  • 【算法】字符串之227.基本计算器 -- 双栈的变形