基于 JavaScript 的网络请求工具库 axios 的使用介绍

简介: 基于 JavaScript 的网络请求工具库 axios 的使用介绍

笔者的日常工作,使用 Angular 开发 Web 应用。在 Angular 应用里如果需要发起 HTTP 请求,使用的是 Angular 自带的 HTTPClient 库。


如果要让我推荐一款不依赖于任何前端框架的网络请求工具库,我会推荐我使用过的另一款工具库 axios.


axios 是一个基于 Promise 的 HTTP 客户端,专门用于浏览器和 Node.js 环境。它的设计简洁而强大,提供了丰富的功能,包括拦截请求和响应、转换请求和响应数据等。在Node.js开发中,axios是处理HTTP请求的一种流行选择,因为它提供了一种简便的方式来处理异步操作。

安装

只需执行以下命令,即可使用 npm 进行安装:

`npm install axios`

安装之后,出现在本地项目的 node_modules 文件夹内:

基本用法

发送 GET 请求

使用 axios 发送 GET 请求非常简单。下面的例子,展示了如何获取百度首页的 HTML 内容:

const axios = require('axios');
axios.get('https://www.baidu.com')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

将上面的代码另存为一个 .js 文件,然后用 node 命令执行,即可看到从网络上取回来的百度首页的 HTML 源代码:

发送 POST 请求

发送 POST 请求同样直观。下面是向某服务器通过 HTTP POST 提交 JSON 数据的完整源代码:

const axios = require('axios');
const postData = {
  title: 'foo',
  body: 'bar',
  userId: 1
};
axios.post('https://jsonplaceholder.typicode.com/posts', postData)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

高级功能

拦截器

同 Angular 里的 HTTPInterceptor 一样,axios 允许开发人员在请求或响应被 then 或 catch 处理之前就拦截这些 HTTP 请求。这是一个非常强大的功能,可以用于修改请求或响应、添加通用配置等。


下面这段代码,展示了如何在 axios 里使用 HTTP 请求的拦截器,打印出 HTTP 请求百度首页的 HTTP 请求配置信息和 headers 字段:

const axios = require('axios');
// 请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  console.log('请求拦截器:', config);
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});
axios.get('https://www.baidu.com')
  .then(response => {
    console.log('response from baidu:', response.data);
  })
  .catch(error => {
    console.error(error);
  });

node 执行上述代码后,得到下列输出:

同理,响应拦截器的用法:

const axios = require('axios');
axios.interceptors.response.use(response => {
    // 对响应数据做些什么
    console.log('响应拦截器:', response);
    return response;
  }, error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  });
axios.get('https://www.baidu.com')
  .then(response => {
    console.log('response from baidu:', response.data);
  })
  .catch(error => {
    console.error(error);
  });

执行上面的代码,我们打印出了 HTTP 请求的响应对象(Response Object)的配置信息和头部字段等信息,如下图所示:

自定义实例

我们还可以创建一个自定义实例,以便在同一应用程序中使用不同的配置。这对于使用不同的 API 地址或设置不同的请求头非常有用。

const axios = require('axios');
// 创建实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
// 使用自定义实例发起请求
instance.get('/endpoint')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

示例应用场景

1. 服务器端与第三方 API 交互

在服务器端使用 axios 与第三方 API 交互是一种常见的应用场景。例如,下面的代码是通过 axios 调用 GitHub API 获取笔者的用户信息:

const axios = require('axios');
axios.get('https://api.github.com/users/wangzixi-diablo')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

执行后,打印出我的用户信息:

2. 数据的定时同步

使用 Node.js 的定时任务,结合 axios 可以实现定时从其他服务器同步数据到本地数据库。

const axios = require('axios');
const schedule = require('node-schedule');
// 每天凌晨3点同步数据
const job = schedule.scheduleJob('0 3 * * *', function() {
  axios.get('https://api.example.com/data')
    .then(response => {
      // 处理同步的数据
      console.log('数据同步成功:', response.data);
    })
    .catch(error => {
      console.error('数据同步失败:', error);
    });
});

3. 文件上传

axios 可以用于文件上传,例如将用户上传的文件发送到服务器:

const axios = require('axios');
const fs = require('fs');
const fileStream = fs.createReadStream('path/to/file');
axios.post('https://api.example.com/upload', fileStream)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

总结

axios 是一个功能强大且易于使用的 HTTP 客户端工具,适用于浏览器和 Node.js 环境。它提供了简洁的 API 和丰富的功能,如拦截器、自定义实例等,使得处理 HTTP 请求变得更加灵活和高效。在 Node.js 开发中,axios 是处理异步请求的理想选择,能够满足各种复杂的应用场景。

相关文章
|
14天前
|
JavaScript 前端开发
Math对象:JavaScript中的数学工具
Math对象:JavaScript中的数学工具
26 1
|
1月前
|
前端开发 JavaScript 区块链
连接区块链节点的 JavaScript 库 web3.js
连接区块链节点的 JavaScript 库 web3.js
27 2
|
3天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
1月前
|
JSON JavaScript 前端开发
盘点3个可以操作JavaScript的Python库
盘点3个可以操作JavaScript的Python库
25 0
|
1月前
|
资源调度 JavaScript 前端开发
|
2月前
|
存储 JSON JavaScript
打造开箱即用的js工具库之xijs更新指南(v1.2.2)
打造开箱即用的js工具库之xijs更新指南(v1.2.2)
20 5
|
2月前
|
前端开发 JavaScript 开发者
Canvas库 fabric.js可以实现哪些功能? 动图介绍
fabric.js是一个canvas库,今天整理了一下fabric.js可以实现的功能,用动图的形式分享给大家,方便快速了解fabric.js。
Canvas库 fabric.js可以实现哪些功能? 动图介绍
|
2月前
|
监控 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
77 0
|
2月前
|
JavaScript 前端开发 网络协议
轻松搭建远程Node.js服务端,让你的应用在公共网络中畅行无阻!
Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation(原为 Node.js Foundation,已与 JS Foundation 合并)持有和维护,亦为 Linux 基金会的项目。Node.js 采用 Google 开发的 V8 运行代码,使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能,可优化应用程序的传输量和规模。这些技术通常用于资料密集的即时应用程序。
|
29天前
|
机器学习/深度学习 数据采集 人工智能
m基于深度学习网络的手势识别系统matlab仿真,包含GUI界面
m基于深度学习网络的手势识别系统matlab仿真,包含GUI界面
37 0