JavaScript >> Javascript 文檔 >  >> JavaScript

使用 Axios 獲取 HTTP 響應正文

當你 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 響應狀態碼(如 200404 )。但是大多數時候你並不關心請求成功後的響應代碼,所以你會經常看到直接使用 Promise 鍊式獲取響應體的代碼。

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'));

Tutorial JavaScript 教程
  1. 在 Javascript 中,為什麼當它們都迭代相同次數時,'while(true' 比'for(...)' 慢?

  2. 如何在用戶想要的矩陣中的特定位置插入 X?

  3. document_start 和 document_end 的 Chrome 擴展 content_script

  4. 如何使用document.querySelectorAll選擇除錨點(另一個元素內的錨點)以外的所有標籤?

  5. 如何模擬 useState 鉤子實現,以便它在測試期間實際更改狀態

  6. 掌握 JavaScript 的項目想法

  7. 如何在十分鐘內使用 Redux 讓球滾動起來

  1. 使用 Auth0 輕鬆進行 React 身份驗證

  2. 在 useEffect 中反應永無止境的循環

  3. 解析我的 json 以獲取值 - 從 Xcode 發送到 JS 前端的 json

  4. 在 chrome 擴展中顯示當前 URL

  5. Laravel yajra/Datatables 動作刪除不起作用

  6. 如何在 JavaScript 中從數組中刪除一個項目

  7. 檢查 DOM 元素是否為複選框

  1. 貓鼬時間戳

  2. 使用 Vue 和 Express 進行服務器端渲染

  3. ESLint ES6 Redux global-required Unexpected require();

  4. JSON.stringify 不應該轉義 Unicode 字符嗎?