Ajax的Promise应用

比眉伴天荒 2023-02-26 02:15 7阅读 0赞

## 异步回调的问题 ##

1.  之前处理异步是通过纯粹的回调函数的形式进行处理
2.  很容易进入到回调地狱中，剥夺了函数return的能力
3.  问题可以解决，但是难以读懂，维护困难
4.  稍有不慎就会踏入 回调地狱—嵌套层次深，不好维护

**在实际的使用中，有非常多的应用场景我们不能立即知道应该如何继续往下执行。最常见的一个场景就是ajax请求。通俗来说，由于网速的不同，可能你得到返回值的时间也是不同的，这个时候我们就需要等待，结果出来了之后才知道怎么样继续下去。**

// 简单的ajax原生实现
    var context;
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'https://zsummer.com');
    xhr.send();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            context= xhr.response;
            console.log(context);
        }
    }

在ajax的原生实现中，利用了onreadystatechange事件，当该事件触发并且符合一定条件时，才能拿到想要的数据，之后才能开始处理数据。

这样做看上去并没有什么麻烦，但如果这个时候，我们还需要另外一个ajax请求，这个新ajax请求的其中一个参数，得从上一个ajax请求中获取，这个时候我们就不得不等待上一个接口请求完成之后，再请求后一个接口。如下：

// 新请求
    var url = 'https://zsummer.com?id=' + context.someParams;
    var xhr1 = new XMLHttpRequest();
    xhr1.open('get',url);
    xhr1.send();
    xhr1.onreadystatechange = function() {
       if (xhr1.readyState == 4 && xhr1.status == 200) {
           	console.log(xhr1.reponseText);
       }
    }

这样可能没有什么，但是当出现第三个ajax(甚至更多)仍然依赖上一个请求时，我们的代码就变成了一场灾难。这场灾难，往往也被称为回调地狱。

这个时候，我们可以用到Promise来使代码 **更加具有可读性和可维护性，我们需要将数据请求与数据处理明确的区分开来**。

## Promise是什么？ ##

1.  主要用于异步计算
2.  可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3.  可以在对象之间传递和操作Promise，帮助我们处理队列

总的来说，Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

## Promise 的原理 ##

ES6 规定，Promise 对象是一个构造函数，用来生成 Promise 实例。通过在函数内部 return 一个 Promise 对象的实例，这样就可以使用 Promise 的属性和方法进行下一步操作了。

**Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。**

## Promise 的缺点 ##

1.  无法取消Promise，一旦新建它就会立即执行，无法中途取消
2.  如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
3.  当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

## Promise对象的特点 ##

*  对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
 *  一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

**1)、Promise对象只有三种状态**

*  异步操作“未完成”（pending）
 *  异步操作“已完成”（resolved，又称fulfilled）
 *  异步操作“失败”（rejected）

这三种的状态的变化途径只有两种

1.  异步操作从“未完成”到“已完成”
2.  异步操作从“未完成”到“失败”

这种变化只能发生一次，一旦当前状态变为“已完成”或“失败”，就意味着不会再有新的状态变化了。因此，Promise对象的最终结果只有两种。

1.  异步操作成功，Promise对象传回一个值，状态变为resolved
2.  异步操作失败，Promise对象抛出一个错误，状态变为rejected

new Promise(function(resolve, reject) {
        if(true) { resolve() };
        if(false) { reject() };
    })

Promise对象使用then方法添加回调函数。then方法可以接受两个回调函数，第一个是异步操作成功时（变为resolved状态）时的回调函数，第二个是异步操作失败（变为rejected）时的回调函数（可以省略）。一旦状态改变，就调用相应的回调函数。

**2)、Promise对象中的then方法，可以接收构造函数中处理的状态变化，并分别对应执行。then方法有2个参数，第一个函数接收resolved状态的执行，第二个参数接收reject状态的执行**

then方法的执行结果也会返回一个Promise对象。因此我们可以进行then的链式执行，这也是解决回调地狱的主要方式。

> 注意： then(null, function() \{\}) 就等同于catch(function() \{\})

了解了以上特点后，我们再来解决上面的回调地狱问题。

这个时候我们来看，Promise的resolve和reject处理了很多可能出现的异常。**resolve返回正确的结果，reject返回错误的结果**。并且利用参数传递的方式，将正确结果或者错误信息通过他们的参数传递出来。这样，即使Ajax中的更多请求仍然依赖上一个请求时，仍然不会出现回调地狱的情况。

## Promise的代码优化性 ##

**1)、Promise.all**

> 当有一个ajax请求，它的参数需要另外2个甚至更多请求都有返回结果之后才能确定，那么这个时候，就需要用到Promise.all来帮助我们应对这个场景。

Promise.all接收一个Promise对象组成的数组作为参数，当这个数组所有的Promise对象状态都变成resolved或者rejected的时候，它才会去调用then方法。

var url = 'https://zsumer.com';
    var url1 = 'https://yjz.com';
    function getAll() {
    	// 结合
        return Promise.all([getFun(url), getFun(url1)]);
    }
    // 返回
    getAll().then(function(val) {
        console.log(val);
    })

这样以后就可以用all并行执行多个异步操作，并且在一个回调中处理所有的返回数据，比如你需要提前准备好所有数据才渲染页面的时候就可以使用all,执行多个异步操作将所有的数据处理好，再去渲染。

**2)、Promise.race**

用法类似Promise.all，不过all是以跑的慢的为准执行回调，而Promise.race是以跑的快的为准执行回调。

function getRace() {
        return Promise.race([getFun(url), getFun(url1)]);
    }
    getRace().then(function(val) {
        console.log(val);
    })

Promise.all是等所有的异步操作都执行完了再执行then方法，那么Promise.race方法就是相反的，谁先执行完成就先执行回调。先执行完的不管是进行了Promise.race的成功回调还是失败回调，其余的将不会再进入Promise.race的任何回调。Promise.race是竞争的意思。