一篇学通Axios

Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 node.js 环境。它提供了一种简单易用的方式来发送 HTTP 请求,并支持诸如请求和响应拦截、转换数据、取消请求以及自动转换 JSON 数据等功能。

Axios 名字的由来

Axios 的名字来源于希腊神话中的英雄 Axios。这位英雄是一个勇敢的冒险家,拥有强大的力量和知识,能够改变任何事物,使它们变得更加强大。Axios 库的设计初衷和命名灵感正是源自于这位英雄,旨在提供一种强大且灵活的 HTTP 客户端,帮助开发者在前端和 Node.js 环境中轻松发送 HTTP 请求,并处理各种复杂的网络交互场景。

Axios 详细介绍

  1. 基本概念

    • Axios(全称 ajax I/O system)不是一种新技术,本质上是对原生 XHR(XMLHttpRequest)的封装,但它是基于 Promise 的实现版本,符合最新的 ES 规范。
    • Axios 提供了简单而直观的 API,使得在前端应用程序中进行 HTTP 通信变得更加容易。
    • Axios 可以与现代前端框架(如 React、Vue.js 和 Angular)以及后端服务器(如 Node.js)配合使用。
  2. 主要特性

    • 从浏览器中创建 XMLHttpRequests。
    • 从 node.js 创建 http 请求。
    • 支持 Promise API。
    • 拦截请求和响应。
    • 转换请求数据和响应数据。
    • 取消请求。
    • 自动转换 JSON 数据。
    • 客户端支持防御 XSRF。

Axios 安装

Axios 可以通过多种方式进行安装,包括使用 npm、yarn 或 CDN。

  • 使用 npm

    复制代码
      npm install axios
  • 使用 yarn

    复制代码
     yarn add axios
  • 使用 CDN

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

Axios 示例

1. 发送 GET 请求

  • 基本用法

    axios.get('/user?ID=12345')
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });

    // 或者使用 axios(config) 形式
    axios({
    method: 'get',
    url: '/user',
    params: {
    ID: 12345
    }
    })
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });

  • 使用 axios 实例

    const instance = axios.create({
    baseURL: 'https://some-domain.com/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
    });

    // 发送请求
    instance.get('/user?ID=12345')
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });

2. 发送 POST 请求

  • application/json 类型

    axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
    })
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });

  • form-data 类型

    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    formData.append('user', '12345');

    axios.post('/upload', formData, {
    headers: {
    'Content-Type': 'multipart/form-data'
    }
    })
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });

3 请求拦截器和响应拦截器

  • 请求拦截器

    axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
    }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
    });

  • 响应拦截器

    axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
    }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
    });

  • Axios 官方站点: https://axios-http.com/zh/

  • Axios 源码地址:https://github.com/axios/axios



相关推荐
用户75794199497036 分钟前
基于JavaScript的简易Git
javascript
gzzeason39 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕77840 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
归于尽1 小时前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
自由逐风1 小时前
JS 处理长整型数字的坑:从雪花 ID 精度丢失说起
javascript
爱学习的茄子1 小时前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
云动雨颤1 小时前
流量分发代码实战|学会用JS控制用户访问路径
javascript
wzyoung1 小时前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
游戏开发爱好者81 小时前
iOS 出海 App 安全加固指南:无源码环境下的 IPA 加固与防破解方法
websocket·网络协议·tcp/ip·http·网络安全·https·udp
gnip1 小时前
项目开发流程之技术调用流程
前端·javascript