快捷導(dǎo)航

JavaScript網(wǎng)絡(luò)請求工具庫axios使用實(shí)例探索

更新時間：2024年01月21日 10:07:28 作者：JerryWang_汪子熙

這篇文章主要為大家介紹了JavaScript網(wǎng)絡(luò)請求工具庫axios使用實(shí)例探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

axios 庫

筆者的日常工作，使用 Angular 開發(fā) Web 應(yīng)用。在 Angular 應(yīng)用里如果需要發(fā)起 HTTP 請求，使用的是 Angular 自帶的 HTTPClient 庫。

如果要讓我推薦一款不依賴于任何前端框架的網(wǎng)絡(luò)請求工具庫，我會推薦我使用過的另一款工具庫 axios.

axios 是一個基于 Promise 的 HTTP 客戶端，專門用于瀏覽器和 Node.js 環(huán)境。它的設(shè)計簡潔而強(qiáng)大，提供了豐富的功能，包括攔截請求和響應(yīng)、轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)等。在Node.js開發(fā)中，axios是處理HTTP請求的一種流行選擇，因?yàn)樗峁┝艘环N簡便的方式來處理異步操作。

安裝

只需執(zhí)行以下命令，即可使用 npm 進(jìn)行安裝：

`npm install axios`

安裝之后，出現(xiàn)在本地項(xiàng)目的 node_modules 文件夾內(nèi)：

基本用法

發(fā)送 GET 請求

使用 axios 發(fā)送 GET 請求非常簡單。下面的例子，展示了如何獲取百度首頁的 HTML 內(nèi)容：

const axios = require('axios');

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

將上面的代碼另存為一個 .js 文件，然后用 node 命令執(zhí)行，即可看到從網(wǎng)絡(luò)上取回來的百度首頁的 HTML 源代碼：

發(fā)送 POST 請求

發(fā)送 POST 請求同樣直觀。下面是向某服務(wù)器通過 HTTP POST 提交 JSON 數(shù)據(jù)的完整源代碼：

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 允許開發(fā)人員在請求或響應(yīng)被 then 或 catch 處理之前就攔截這些 HTTP 請求。這是一個非常強(qiáng)大的功能，可以用于修改請求或響應(yīng)、添加通用配置等。

下面這段代碼，展示了如何在 axios 里使用 HTTP 請求的攔截器，打印出 HTTP 請求百度首頁的 HTTP 請求配置信息和 headers 字段：

const axios = require('axios');

// 請求攔截器
axios.interceptors.request.use(config => {
  // 在發(fā)送請求之前做些什么
  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 執(zhí)行上述代碼后，得到下列輸出：

同理，響應(yīng)攔截器的用法：

const axios = require('axios');

axios.interceptors.response.use(response => {
    // 對響應(yīng)數(shù)據(jù)做些什么
    console.log('響應(yīng)攔截器:', response);
    return response;
  }, error => {
    // 對響應(yīng)錯誤做些什么
    return Promise.reject(error);
  });

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

執(zhí)行上面的代碼，我們打印出了 HTTP 請求的響應(yīng)對象（Response Object）的配置信息和頭部字段等信息，如下圖所示：

自定義實(shí)例

我們還可以創(chuàng)建一個自定義實(shí)例，以便在同一應(yīng)用程序中使用不同的配置。這對于使用不同的 API 地址或設(shè)置不同的請求頭非常有用。

const axios = require('axios');

// 創(chuàng)建實(shí)例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 使用自定義實(shí)例發(fā)起請求
instance.get('/endpoint')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

示例應(yīng)用場景

1. 服務(wù)器端與第三方 API 交互

在服務(wù)器端使用 axios 與第三方 API 交互是一種常見的應(yīng)用場景。例如，下面的代碼是通過 axios 調(diào)用 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);
  });

執(zhí)行后，打印出我的用戶信息：

2. 數(shù)據(jù)的定時同步

使用 Node.js 的定時任務(wù)，結(jié)合 axios 可以實(shí)現(xiàn)定時從其他服務(wù)器同步數(shù)據(jù)到本地數(shù)據(jù)庫。

const axios = require('axios');
const schedule = require('node-schedule');

// 每天凌晨3點(diǎn)同步數(shù)據(jù)
const job = schedule.scheduleJob('0 3 * * *', function() {
  axios.get('https://api.example.com/data')
    .then(response => {
      // 處理同步的數(shù)據(jù)
      console.log('數(shù)據(jù)同步成功:', response.data);
    })
    .catch(error => {
      console.error('數(shù)據(jù)同步失敗:', error);

    });
});

3. 文件上傳

axios 可以用于文件上傳，例如將用戶上傳的文件發(fā)送到服務(wù)器：

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

總結(jié)

axios 是一個功能強(qiáng)大且易于使用的 HTTP 客戶端工具，適用于瀏覽器和 Node.js 環(huán)境。它提供了簡潔的 API 和豐富的功能，如攔截器、自定義實(shí)例等，使得處理 HTTP 請求變得更加靈活和高效。在 Node.js 開發(fā)中，axios 是處理異步請求的理想選擇，能夠滿足各種復(fù)雜的應(yīng)用場景。

以上就是JavaScript網(wǎng)絡(luò)請求工具庫axios使用實(shí)例探索的詳細(xì)內(nèi)容，更多關(guān)于JavaScript axios網(wǎng)絡(luò)請求的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: