聊一聊資料請求中Ajax、Fetch及Axios的區別

2022-02-15 13:02:40

Ajax介紹

Ajax是XMLHttpRequest 物件提供了對 HTTP 協定的完全的存取，早期的專案，我們只能通過它向伺服器端請求資料，包括Jquery封裝的Ajax請求庫也是基於它的封裝

我們來看一下基於XMLHttpRequest物件去做一個Ajax請求的事例

// 通過XMLHttpRequest初始化一個Ajax請求範例
const xhr = new XMLHttpRequest();

// 設定超時時間,0表示永不超時
xhr.timeout = 0;

// 初始化請求，這個方法不會傳送請求給伺服器端
// 第一個引數是請求的方法，例如GET、POST
// 第二個引數，伺服器端請求的url
// 第三個引數，請求是否是非同步，預設為true非同步
xhr.open('POST', '/api/url', true);

// 請求需要傳送的資料
const formData = new FormData();

formData.append("username", "XXX");

formData.append("age", 18);

// 請求發起
xhr.send(formData);

// 監聽請求結果
// 拿到伺服器返回的資料
xhr.onreadystatechange = function () {
  // 當readyState為4並且xhr.status為200時
  // 拿到了正常返回的資料
  if (xhr.readyState == 4 && xhr.status == 200) {
    alert(xhr.responseText);
  } else {
    // 伺服器返回了異常資料
    alert(xhr.statusText);
  }
};

從上面的事例可以看出來，我們要想請求資料，需要先new XMLHttpRequest範例出來，然後再通過兼聽函數的方式來拿到伺服器返回的資料

Fetch介紹

Fetch是window物件提供的一個方法，用於實現基於promise的http請求，它的出現是用來取代最早的XMLHttpRequest實現的ajax請求

同樣的我們先來看一下Fetch請求的範例

// 請求的資料
const data = {
  username: "xxx",
  age: 18,
};

// 第一個引數是請求的url
// 第二個引數是一個物件
// 可以設定請求方式，請求資料、請求超時
// 還有請求頭等
fetch("/api/url", {
  // 請求方式
  method: "POST",
  // 請求資料通過body傳遞
  body: JSON.stringify(data),
}).then((response) => {
    // 正常服務返回的資料通過then拿到
    console.log(response);
}).catch((error) => {
    // 異常返回在catch裡處理
    console.log(error);
});

從上面的事例可以看出來，我們要想請求資料，直接使用fetch這樣的全域性物件就行，然後再通過Promise的方式來拿到伺服器返回的資料

Axios介紹

Axios並不是原生Js提供的方法，它是一個基於XMLHttpRequest封裝的Ajax請求庫，並且把伺服器返回的資料通過Promise的方式返回

還是老規矩，我們通過一個事例來看看Axios是怎麼請求資料的

// 首先通過npm安裝axios
npm i -S axios

// 通過import的方式在專案中引入axios
import axios from 'axios'

// 我們可以看到引數是一個物件
// 裡面可以設定請求方式、請求資料
// 還有請求頭等
axios({
  method: "POST",
  url: "/api/url",
  data: {
    username: "xxx",
    age: 18,
  },
}).then((response) => {
    // 正常服務返回的資料通過then拿到
    console.log(response);
}).catch((error) => {
    // 異常返回在catch裡處理
    console.log(error);
});

從上面的事例可以看出來，我們要想請求資料，使用方式基本上和Fetch保持一致，但是它的底層確是基於XMLHttpRequest實現的

對比

幾種方式的對比

ajax:

優點：區域性更新，原生支援

缺點：可能破壞瀏覽器後退功能，巢狀回撥

jqueryAjax:

在原生ajax的基礎上進行封裝，支援jsonp

fetch:

優點：解決回撥地獄

缺點：APIA偏低層，需要封裝，預設不帶cookie，需要手動新增；瀏覽器支援情況不是很友好，需要第三方polyfill

axios的特點：

支援瀏覽器和node.js

支援promise

能攔截請求和響應

能轉換請求和相應資料

能取消請求

自動轉換json資料

瀏覽器端支援防止CSRF(跨站請求偽造)

總結

我們在實際專案中一般使用axios，因為它是一個成熟的ajax請求庫，幫我們封裝了很多實用的方法來向伺服器請求資料

好了開發中，常用的伺服器資料請求就講到這了

到此這篇關於資料請求中Ajax、Fetch及Axios區別的文章就介紹到這了,更多相關Ajax、Fetch及Axios區別內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

聊一聊資料請求中Ajax、Fetch及Axios的區別

目錄

Ajax介紹

Fetch介紹

Axios介紹

對比

幾種方式的對比

總結

熱門文章