5個最好的庫,用於在React中進行AJAX調用

api-img

以下React為例,如其他javascript框架與庫也是適用於其中,如vue.js。

在過去的兩年裡一直和React合作。許多React初學者提出的問題之一是:“從服務器獲取數據的React方式是什麼?”或“我應該如何在React中進行AJAX調用”?要回答你的問題,盡可能多的開發者會告訴你,React只是一個視圖庫,你可以隨意使用任何你喜歡的東西。然而,這並沒有多大幫助 - 特別是當JavaScript格局變化如此之快時。因此,在本文中,我將嘗試回答這個基本問題,並列出5個簡單的庫,用於在React中進行AJAX調用。

jQuery $ .ajax

這是一個快速和不簡潔方式來進行AJAX調用。在前面的官方React教程中,他們使用jQuery從服務器獲取數據。如果您剛剛開始使用React,可以為您節省大量時間。我們中的許多人已經熟悉jQuery。因此,在React中理解和使用它並不需要太多時間。下面是使用jQuery進行簡單的API調用的過程:

loadCommentsFromServer: function() {
      $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data}); // Notice this
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  }

PS片段來自React的前官方教程

這是在$.ajaxReact組件中使用的舊jQuery 。注意this.setState()在success回調中如何調用。這是如何使用從API調用獲得的數據更新狀態。

然而,jQuery是一個具有許多功能的大型庫 - 因此,僅僅為了進行API調用而使用它是沒有意義的(除非您已經將它用於其他一些任務)。那麼,有什麼選擇?我們應該使用什麼?答案是fetchAPI。

Fetch API

Fetch是一種新的,簡單和標準化的API,旨在統一在Web上提取和替換XMLHttpRequest。它有一個舊版瀏覽器的polyfill,應該在現代web應用中使用。Fetch API提供了一個JavaScript接口,用於訪問和操縱HTTP管道的部分,例如請求和響應。 它還提供了一個全局fetch()方法,該方法提供了一種簡單,合乎邏輯的方式來跨網絡異步獲取資源。 以下是修改後的API調用的內容:

loadCommentsFromServer: function() {
    fetch(this.props.url).then(function(response){
        // perform setState here
    });
}

在大多數現代React教程中,您會發現fetch常被應用在其中。要了解更多信息fetch,請查看以連結:

Superagent

Superagent是為了更好的可讀性和靈活性而創建的輕量級AJAX API庫。如果由於某種原因,你不想使用fetch,你一定要檢查一下。下面是一個演示其用法的片段:

loadCommentsFromServer: function() {
    request.get(this.props.url).end(function(err,res){
        // perform setState here
    });
}

Superagent也有一個具有相同API的Node.js模塊。如果您使用Node.js和React構建同構應用程序,則可以superagent使用諸如webpack之類的東西進行捆綁,並使其在客戶端可用。由於客戶端和服務器的API是相同的,為了使其在瀏覽器中工作,不需要更改代碼。

Axios

Axios是Node.js和瀏覽器的基於promise的HTTP客戶端。像fetch和superagent,它可以在客戶端和服務器上運行。它有許多其他有用的功能,你可以在他們的GitHub頁面上找到它。

axios是一個ajax的封裝,是vue.js2.0之後官方推薦的ajax插件,相對於之前官方推薦的vue-resource,axios有著更大的適用性,不僅可以使用在客戶端,也可以使用在伺服器端,也擁有更加簡單實用的api

以下是您如何使用Axios進行API調用:

loadCommentsFromServer: function() {
    axios.get(this.props.url).then(function(response){
      // perform setState here
    }).catch(function(error){
      //Some error occurred
    });
}

Request

如果沒有設計簡單的request庫,這個列表將是不完整的。有了更多的12k GitHub星星,它也是最受歡迎的Node.js模塊之一。你可以request在他們的GitHub頁面上找到關於模塊的更多信息。

示例用法:

loadCommentsFromServer: function() {
    request(this.props.url, function(err, response, body){
          // perform setState here
    });
}

My Take

由於fetch新的標準化API與遠程資源進行交互,我建議將其用於所有AJAX需求(不僅在React中,而且在所有類型的JavaScript應用程序中)。

文章翻譯來源:5 best libraries for making AJAX calls in React

您也可能喜歡這些文章

Copyright © 2018 ucamc