数据交互——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