使用 Axios 获取 HTTP 响应主体

Question

当你 await 在 Axios 请求 上，您会得到 Axios 响应 。 Axios 响应是一个 具有多个属性的POJO ，包括 data ，其中包含已解析的响应正文。

const axios = require('axios');

const res = await axios.get('https://httpbin.org/get', { params: { answer: 42 } });

res.constructor.name; // 'Object', means `res` is a POJO

// `res.data` contains the parsed response body
res.data; // { args: { answer: 42 }, ... }
res.data instanceof Object; // true

Axios 响应包含其他几个属性，例如 status ，其中包含 HTTP 响应状态代码（如 200 或者 404 ). 但大多数时候你并不关心请求成功后的响应码，所以你会经常看到直接使用 promise chaining 获取响应体的代码。

const data = await axios.get(url).then(res => res.data);

您还可以使用 解构赋值 获取响应主体。

// Equivalent to `const data = await axios.get(url).then(res => res.data)`
const { data } = await axios.get(url);

自动解析

axios 根据 HTTP 响应的解析响应 Content-Type 标头。 当响应的内容类型是 application/json , Axios 会自动尝试将响应解析为 JavaScript 对象。

const axios = require('axios');

const res = await axios.get('https://httpbin.org/get', { params: { answer: 42 } });

res.headers['content-type']; // 'application/json'

请记住，响应标头是由服务器发送的。 因此，如果服务器发回不同的内容类型，您可能需要自己处理响应。

对于其他内容类型，例如 text/html ， 这 res.data 属性 将是一个字符串。

const axios = require('axios');

const res = await axios.get('https://httpbin.org/html');

res.headers['content-type']; // 'text/html; charset=utf-8'

typeof res.data; // 'string'
res.data; // '... <h1>Herman Melville - Moby-Dick</h1> ...'

串流

您可以配置的类型 data 使用 Axios 的属性 responseType 目的。 默认， responseType 被设定为 'json' ，这意味着 Axios 将尝试将响应解析为 JSON。

但是，如果您希望使用 Axios 下载图像，那是不正确的。 你可以设置 responseType 至 'arraybuffer' 将响应作为 ArrayBuffer 获取：

const axios = require('axios');

const res = await axios.get('https://images.unsplash.com/photo-1506812574058-fc75fa93fead', {
  responseType: 'arraybuffer'
});

const fs = require('fs');
fs.writeFileSync('./south-beach.jpg', res.data);

您还可以设置 responseType 至 'stream' 以 Node.js 流的形式获取响应：

const axios = require('axios');

const res = await axios.get('https://images.unsplash.com/photo-1506812574058-fc75fa93fead', {
  responseType: 'stream'
});

const fs = require('fs');
res.data.pipe(fs.createWriteStream('./south-beach.jpg'));