這一小節，我們介紹一下前端項目開發中，HTTP請求會用到的3個工具，分別是fetch、axios和js-tool-big-box中的jsonp請求。那么他們都有哪些小區別呢？我們一起來看一下。

目錄

1 fetch

2 axios

3 js-tool-big-box 的 jsonp 請求

3.1 安裝js-tool-big-box工具庫

3.2 導入使用

---

1 fetch

1. 瀏覽器內置，無需額外安裝： fetch是現代瀏覽器內置的API，不需要額外的庫或依賴，對于一些簡單的項目或者不希望增加打包體積的項目，fetch是一個輕量級的選擇。

2. 簡單請求： 如果你的請求邏輯比較簡單，不需要復雜的配置或處理，比如簡單的GET請求和POST請求，fetch足夠滿足需求。

3. 現代瀏覽器環境： 由于fetch是ES6+時代的API，支持Promise，所以在現代瀏覽器環境中使用fetch可以獲得更簡潔的代碼。

fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error('Network response was not ok ' + response.statusText);}return response.json();}).then(data => console.log(data)).catch(error => console.error('There has been a problem with your fetch operation:', error));

2 axios

1. 復雜的請求需求： axios提供了更多功能和配置選項，例如請求和響應攔截器、取消請求、自動轉換JSON數據、處理并發請求等。如果你的項目中需要處理這些復雜的需求，axios是更好的選擇。

2. 兼容性需求： axios支持更多的瀏覽器，包括一些舊版瀏覽器，如果你的項目需要兼容更多類型的瀏覽器，axios可能更合適。

3. 更好的錯誤處理： axios在處理HTTP錯誤狀態碼（如404，500等）時，比fetch更方便，因為fetch即使在返回404或500狀態碼時也不會被標記為reject，仍需要手動檢查響應的狀態碼。

4. 更好的請求配置和默認設置： axios允許設置全局默認配置，可以在創建實例時配置baseURL、timeout等選項，簡化多次請求時的配置工作。

import axios from 'axios';axios.get('https://api.example.com/data').then(response => console.log(response.data)).catch(error => console.error('There has been a problem with your axios operation:', error));

3 js-tool-big-box 的 jsonp 請求

說到jsonp請求，大家就會想到跨域，如果服務端沒有做CROS的跨域設置，而是要通過JSONP跨域請求的方式，那么這個工具庫會非常合適。

再下面的示例代碼中，我們本站的IP是localhost，端口是8080，請求服務端目標IP為127.0.0.1，端口為3000，正是屬于跨域場景.

3.1 安裝js-tool-big-box工具庫

npm i?js-tool-big-box

3.2 導入使用

導入 ajaxBox 對象，因為jsonp方法的宿主是 ajaxBox ，導入后就可以使用了。

import { ajaxBox } from 'js-tool-big-box';ajaxBox.sendJSONP('http://127.0.0.1:3000/users/bar', 'callback', function(data){console.log('獲取到的JSONP請求數據', data);
});