Axios 教程 - 《ZetCode 中文系列教程》

Axios
安装 Axios
Axios 响应对象
带回调的 Axios GET 请求
带有异步/等待的 Axios GET 请求
Axios HEAD 请求
Axios 基本 API
Axios 自定义标头
获取 Github 信息
Axios POST 请求
Axios 下载图像
Axios 多个请求
将 Axios 与 JSON 服务器一起使用
- 启动 JSON 服务器
发布用户
- 获取用户
删除用户

原文： http://zetcode.com/javascript/axios/

Axios 教程展示了如何使用 Axios 客户端库在 JavaScript 中生成请求。

Axios

Axios 是用于浏览器和 Node.js 的基于 Promise 的 HTTP 客户端。 Axios 使向 REST 端点发送异步 HTTP 请求和执行 CRUD 操作变得容易。它可以在普通 JavaScript 中使用，也可以与 Vue 或 React 之类的库一起使用。

在本教程中，我们将在 Node.js 应用中使用 Axios。

安装 Axios

首先，我们安装 Axios。

$ node -v
v11.5.0

我们使用 Node.js 11.5 版。

$ npm init -y

我们启动一个新的 Node.js 应用。

$ npm i axios

我们使用npm i axios命令安装 Axios。

Axios 响应对象

当我们向服务器发送请求时，它返回一个响应。 Axios 响应对象包括：

data - 服务器返回的有效负载
status - 服务器返回的 HTTP 代码
statusText - 服务器返回的 HTTP 状态消息
header - 服务器发送的标头
config - 原始请求配置
request - 请求对象

带回调的 Axios GET 请求

在第一个示例中，我们创建一个简单的 GET 请求。我们使用回调。

simple_get.js

const axios = require('axios');
axios.get('http://webcode.me').then(resp => {
    console.log(resp.data);
});

我们生成一个简单的 GET 请求并显示输出。

const axios = require('axios');

包括 Axios 库。

axios.get('http://webcode.me').then(resp => {
    console.log(resp.data);
});

使用get()，我们发送一个 GET 请求。我们从响应中输出数据。数据是 HTML 代码。

$node simple_get.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My html page</title>
</head>
<body>
    <p>
        Today is a beautiful day. We go swimming and fishing.
    </p>
    <p>
          Hello there. How are you?
    </p>
</body>
</html>

这是输出。

带有异步/等待的 Axios GET 请求

下面的示例创建相同的请求。这次我们使用async/await语法。

simple_get.js

const axios = require('axios');
async function makeGetRequest() {
  let res = await axios.get('http://webcode.me');
  let data = res.data;
  console.log(data);
}
makeGetRequest();

该示例使用async/await语法创建一个简单的 GET 请求。

Axios HEAD 请求

HEAD 请求是没有消息正文的 GET 请求。在 Axios 中，使用head()创建 HEAD 请求。

head_request.js

const axios = require('axios');
async function makeHeadRequest() {
  let res = await axios.head('http://webcode.me');
  console.log(`Status: ${res.status}`)
  console.log(`Server: ${res.headers.server}`)
  console.log(`Date: ${res.headers.date}`)
}
makeHeadRequest();

该示例显示了通过 HEAD 请求生成的响应的状态，服务器名称，响应日期。

$ node head_request.js
Status: 200
Server: nginx/1.6.2
Date: Mon, 04 Feb 2019 15:08:56 GMT

这是输出。

Axios 基本 API

get()，post()或delete()方法是基本 axios API 的便捷方法：axios(config)和axios(url, config)。

basic_api.js

const axios = require('axios');
async function makeRequest() {
    const config = {
        method: 'get',
        url: 'http://webcode.me'
    }
    let res = await axios(config)
    console.log(res.status);
}
makeRequest();

该示例向webcode.me创建 GET 请求。

const config = {
    method: 'get',
    url: 'http://webcode.me'
}

我们在配置对象中指定请求的详细信息。

Axios 自定义标头

在下面的示例中，我们发送一个自定义标头。

custom_header.js

const axios = require('axios');
async function makeRequest() {
    const config = {
        method: 'get',
        url: 'http://webcode.me',
        headers: { 'User-Agent': 'Console app' }
    }
    let res = await axios(config)
    console.log(res.request._header);
}
makeRequest();

该示例发送一个自定义的标头。

const config = {
    method: 'get',
    url: 'http://webcode.me',
    headers: { 'User-Agent': 'Console app' }
}

自定义数据将添加到配置对象的headers属性中。

console.log(res.request._header);

我们验证发送的数据。

$ node custom_header.js
GET / HTTP/1.1
Accept: application/json, text/plain, */*
User-Agent: Console app
Host: webcode.me
Connection: close

这是输出。

获取 Github 信息

许多在线服务包含公共 API。在以下示例中，我们生成对 Github API 的请求。

github.js

const axios = require('axios');
async function getNumberOfFollowers() {
  let res = await axios.get('https://api.github.com/users/janbodnar');
  let nOfFollowers = res.data.followers;
  let location = res.data.location;
  console.log(`# of followers: ${nOfFollowers}`)
  console.log(`Location: ${location}`)
}
getNumberOfFollowers();

在示例中，我们获得关注者的数量和用户的位置。

$ node github.js
# of followers: 44
Location: Bratislava

这是输出。

Axios POST 请求

使用post()方法创建 POST 请求。

post_request.php

const axios = require('axios');
async function makePostRequest() {
    let res = await axios.post('https://jsonplaceholder.typicode.com/posts');
    console.log(`Status code: ${res.status}`);
    console.log(`Status text: ${res.statusText}`);
    console.log(`Request method: ${res.request.method}`);
    console.log(`Path: ${res.request.path}`);
    console.log(`Date: ${res.headers.date}`);
    console.log(`Data: ${res.data}`);
}
makePostRequest();

该示例创建对在线测试服务的 POST 请求。

$ node post_request.js
Status code: 201
Status text: Created
Request method: POST
Path: /posts
Date: Mon, 04 Feb 2019 16:54:36 GMT
Data: [object Object]

这是输出。

Axios 下载图像

以下示例显示了如何使用 Axios 下载图像。

get_image.js

const axios = require('axios');
const fs = require('fs');
var config = {
    responseType: 'stream'
};
let url = 'httpsimg.dog.ceo/breeds/setter-english/n02100735_4870.jpg';
async function getImage() {
    let resp = await axios.get(url, config);
    resp.data.pipe(fs.createWriteStream('image.jpg'));
}
getImage();

该示例从在线服务中检索图像，该服务保留了狗的图像。

const axios = require('axios');
const fs = require('fs');

我们包括axios和fs模块。

var config = {
    responseType: 'stream'
};

我们在配置对象中指定响应类型。

let resp = await axios.get(url, config);

我们得到图像。

resp.data.pipe(fs.createWriteStream('image.jpg'));

借助fs模块，我们将图像保存到磁盘。

Axios 多个请求

我们可以使用 Axios 一次创建多个请求。

multiple_requests.js

const axios = require('axios');
async function makeRequests() {
    let [u1, u2] = await Promise.all([
        axios.get('https://api.github.com/users/janbodnar'),
        axios.get('https://api.github.com/users/symfony')
    ]);
    console.log(`Jan Bodnar: ${u1.data.created_at}`);
    console.log(`Symfony: ${u2.data.created_at}`);
}
makeRequests();

要发送多个请求，我们使用Promise.all()方法。

$ node multiple_requests.js
Jan Bodnar: 2016-01-31T12:12:28Z
Symfony: 2009-10-24T04:05:23Z

这是输出。

将 Axios 与 JSON 服务器一起使用

JSONServer 是一个很棒的工具，它使我们能够轻松创建伪造的 REST API。

$ npm i -g json-server

我们安装json-server。

users.json

{
  "users": [
    {
      "id": 1,
      "first_name": "Robert",
      "last_name": "Schwartz",
      "email": "rob23@gmail.com"
    },
    {
      "id": 2,
      "first_name": "Lucy",
      "last_name": "Ballmer",
      "email": "lucyb56@gmail.com"
    },
    {
      "id": 3,
      "first_name": "Anna",
      "last_name": "Smith",
      "email": "annasmith23@gmail.com"
    },
    {
      "id": 4,
      "first_name": "Robert",
      "last_name": "Brown",
      "email": "bobbrown432@yahoo.com"
    },
    {
      "id": 5,
      "first_name": "Roger",
      "last_name": "Bacon",
      "email": "rogerbacon12@yahoo.com"
    }
  ]
}

这是我们的测试数据。

启动 JSON 服务器

JSON 服务器从我们已全局安装的json-server启动。

$ json-server --watch data.json

--watch选项用于指定服务器的数据。

$ curl localhost:3000/users/2/
{
  "id": 2,
  "first_name": "Lucy",
  "last_name": "Ballmer",
  "email": "lucyb56@gmail.com"
}

使用 curl 命令，使用户获得 ID 2。

发布用户

我们发布了一个新用户。

post_user.js

const axios = require('axios');
async function makePostRequest() {
    params = {
        id: 6,
        first_name: 'Fred',
        last_name: 'Blair',
        email: 'freddyb34@gmail.com'
      }
    let res = await axios.post('http://localhost:3000/users/', params);
    console.log(res.data);
}
makePostRequest();

该示例发布了一个新用户。

let res = await axios.post('http://localhost:3000/users/', params);

将post参数作为第二个参数传递给post()方法。

获取用户

我们从测试服务器获取用户。

get_users.js

const axios = require('axios');
async function makeGetRequest() {
  let res = await axios.get('http://localhost:3000/users/');
  let data = res.data;
  console.log(data);
}
makeGetRequest();

该程序从我们的测试服务器检索所有用户。

$ node get_users.js
[ { id: 1,
    first_name: 'Robert',
    last_name: 'Schwartz',
    email: 'rob23@gmail.com' },
  { id: 2,
    first_name: 'Lucy',
    last_name: 'Ballmer',
    email: 'lucyb56@gmail.com' },
  { id: 3,
    first_name: 'Anna',
    last_name: 'Smith',
    email: 'annasmith23@gmail.com' },
  { id: 4,
    first_name: 'Robert',
    last_name: 'Brown',
    email: 'bobbrown432@yahoo.com' },
  { id: 5,
    first_name: 'Roger',
    last_name: 'Bacon',
    email: 'rogerbacon12@yahoo.com' },
  { id: 6,
    first_name: 'Fred',
    last_name: 'Blair',
    email: 'freddyb34@gmail.com' } ]

这是输出。

删除用户

使用delete()删除资源。

delete_user.js

const axios = require('axios');
async function makePostRequest() {
    let res = await axios.delete('http://localhost:3000/users/2/');
    console.log(res.status);
}
makePostRequest();

该示例删除具有 ID 2 的用户。

在本教程中，我们使用了 JavaScript Axios 模块。

您可能也对以下相关教程感兴趣： JSON 服务器教程，笑话教程， Moment.js 教程，从 JavaScript 中的 URL 读取 JSON ， JavaScript 贪食蛇教程， JQuery 教程， Node Sass 教程， Lodash 教程。