資料互動——Promise、Ajax、axios和fetch的優缺點

乙太.發表於2020-04-13
PromiseiOS

一、Promise

Promise主要用於解決非同步回撥巢狀的問題。
當多個ajax請求之間存在依賴關係，也就是說一個請求必須使用另一個請求返回的結果時，需要將這個請求巢狀在另一個請求的回撥函式上，才能使用另一個請求的結果來傳送這個請求。
Promise的思路是將非同步請求作為一個物件，將執行成功和失敗作為這個物件的方法，執行成功的時候將結果放到這個物件的then方法中處理後續的邏輯，失敗呼叫catch方法。這樣呼叫它就避免了回撥函式的巢狀。
使用場景: 主要用於保證多個非同步請求都完成以後，再進行後續的業務。

resolve成功狀態
reject拒絕狀態
then是前面返回promise的處理

Promise的相關概念
es6新語法 用來處理非同步程式設計
promise是一個物件 可以獲取非同步操作的訊息

可以避免多層非同步呼叫巢狀的問題(回撥地獄)
提供了簡潔的API 使得控制非同步操作更加容易
基於promise傳送ajax請求

Promise常用的API

1.例項方法
.then() 得到非同步任務的正確結果
.catch() 得到異常資訊
.finally() 成功與否都會執行

2.物件方法
Promise.all() 併發處理多個非同步任務 所有任務都執行完成才能得到結果
Promise.race() 併發處理多個非同步任務 只要有一個任務完成就能得到結果

原文連結：https://blog.csdn.net/weixin_43883485/article/details/105142491

二、ajax，fetch，axios優缺點

axios是通過promise實現對ajax技術的一種封裝，就像jQuery實現ajax封裝一樣。

簡單來說： ajax技術實現了網頁的區域性資料重新整理，axios實現了對ajax的封裝。

axios是ajax ajax不止axios。

1.ajax優缺點

1.本身是針對MVC的程式設計,不符合現在前端MVVM的浪潮。
2.基於原生的XHR開發，XHR本身的架構不清晰，已經有了fetch的替代方案。
3.JQuery整個專案太大，單純使用ajax卻要引入整個JQuery非常的不合理。
4.不支援back，安全性不高，暴露了與服務端互動的細節。
5.對瀏覽器的搜尋引擎較弱，不會執行js程式碼，爬蟲爬不到，跨域請求有一定的限制。

$.ajax({
    type: 'POST',
    url: url,
    data: data,
    dataType: dataType,
    success: function() {},
    error: function() {}})

2.axios優缺點

1.從node.js發出http請求，支援promise API傳送請求和攔截響應。
2.自動轉換JSON資料，防止CSRF/XSRF攻擊。
3.提供了一些併發請求的介面。

axios({
            url: '/getUsers',
            method: 'get',
            responseType: 'json', // 預設的
            data: {
                //'a': 1,
                //'b': 2,
            }
        }).then(function (response) {
            console.log(response);
            console.log(response.data);
        }).catch(function (error) {
            console.log(error);
            }）

3.fetch優缺點

符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個物件裡。
更好更方便的寫法，更加底層，提供的API豐富（request, response）。
脫離了XHR，是ES規範裡新的實現方式。
1）fetchtch只對網路請求報錯，對400，500都當做成功的請求，需要封裝去處理。
2）fetch預設不會帶cookie，需要新增配置項。
3）fetch不支援abort，不支援超時控制，使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺執行，造成了量的浪費。
4）fetch沒有辦法原生監測請求的進度，而XHR可以。

// 原生XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText) // 從伺服器獲取資料
    }
}
xhr.send()

// fetch
fetch(url).then(response = > {
    if (response.ok) {
        response.json()
    }
}).then(data = > console.log(data)).
catch (err = > console.log(err))

原文連結：https://blog.csdn.net/mei0515/article/details/94570251

相關文章