數據交互——Promise、Ajax、axios和fetch的優缺點

一、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