JavaScript中Promise的使用详解

Promise是ES6中的函数，规范了如何处理异步任务的回调函数，功能类似于jQuery的defferred。简单说就是通过promise对象的不同状态调用不同的回调函数。目前IE8及以下不支持，其他浏览器都支持。

promise对象的状态，从Pending转换为Resolved或Rejected之后，这个promise对象的状态就不会再发生任何变化。

使用步骤：

// 异步任务，通过调用resolve(value) 或 reject(error)，以改变promise对象的状态；改变状态的方法只能在此调用。

//promise状态改变后，会调用对应的回调方法

});

promise.then(function(value){//resolve时的回调函数，参数由异步的函数传进来})

.catch(function(error){//发生异常时或明确reject()时的回调函数})

具体使用：

函数封装promise对象 return new Promise(function (resolve,reject) { var req = new XMLHttpRequest(); req.open('GET',URL,true); req.onload = function () { if (req.status === 200) { resolve(req.responseText); } else { reject(new Error(req.statusText)); } }; req.onerror = function () { reject(new Error(req.statusText)); }; req.send(); }); } // 运行示例 var URL = "http://httpbin.org/get"; getURL(URL).then(function onFulfilled(value){ console.log(value); }).catch(function onRejected(error){ console.error(error); });

Promise的回调只有异步方式，即使是同步任务的回调也是异步执行。

注册时状态为resolved，但回调仍是异步的； }); console.log("outer promise"); // 执行2：同步代码先执行

promise的方法链

then方法注册的回调会依次被调用，每个then方法之间通过return 返回值传递参数。但是回调中的异常会导致跳过之间then的回调，直接调用catch的回调，之后再继续调用剩下的then的回调。在then(onFulfilled,onRejected)中，onFulfilled的异常不会被自己的onRejected捕获，所以优先使用catch。

promise .then(taskA) .then(taskB) .catch(onRejected) .then(finalTask);

taskA抛异常，taskB被跳过，finalTask仍会被调用，因为catch返回的promise对象的状态为resolved。

then方法内可以返回3种值

1. 返回另一个promise对象，下一个then方法根据其状态选择onFullfilled/onRejected回调函数执行，参数仍由新promise的resolv/reject方法传递；

2. 返回一个同步值，下一个then方法沿用当前promise对象的状态，无需等异步任务结束会立即执行；实参为上一then的返回值；如果没有return，则默认返回undefined；

3. 抛出异常（同步/异步）：throw new Error(‘xxx');

then不仅是注册一个回调函数，还会将回调函数的返回值进行变换，创建并返回一个新promise对象。实际上Promise在方法链中的操作的都不是同一个promise对象。

true console.log(thenPromise !== catchPromise);// => true

Promise.all()静态方法，同时进行多个异步任务。在接收到的所有promise对象都变为FulFilled 或者Rejected 状态之后才会继续进行后面的处理。

// 由promise对象组成的数组会同时执行，而不是一个一个顺序执行，开始时间基本相同。
function timerPromisefy(delay) {
console.log('开始时间：”'+Date.now())
return new Promise(function (resolve) {
setTimeout(function () {
resolve(delay);
},delay);
});
}
var startDate = Date.now();
Promise.all([
timerPromisefy(100),//promise用工厂形式包装一下
timerPromisefy(200),timerPromisefy(300),timerPromisefy(400)
]).then(function (values) {
console.log(values); // [100，200，300，400]
});

不同时执行，而是一个接着一个执行promise

Promise.race()同all()类似，但是race()只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会执行对应的回调函数。不过在第一个promise对象变为Fulfilled之后，并不影响其他promise对象的继续执行。

Promise.race()作为定时器的妙用

在then中改变promise状态

因为then的回调中只有value参数，没有改变状态的方法（只能在构造方法的异步任务中使用），要想改变传给下一个then的promise对象的状态，只能重新new一个新的Promise对象，在异步任务中判断是否改变状态，最后return出去传给下一个then/catch。

方法 promise.then(function (value) { var pms=new Promise(function(resolve,reject){ setTimeout(function () { // 在此可以判断是否改变状态reject/resolve Reject(‘args')； },1000); }) return pms; //该promise对象可以具有新状态，下一个then/catch需要等异步结束才会执行回调；如果返回普通值/undefined，之后的then/catch会立即执行 }).catch(function (error) { // 被reject时调用 console.log(error) });

获取两个promises的结果

方法1：通过在外层的变量传递 var user; getUserByName('nolan').then(function (result) { user = result; return getUserAccountById(user.id); }).then(function (userAccount) { //可以访问user和userAccount });

//方法2：后一个then方法提到前一个回调中
getUserByName('nolan').then(function (user) {
return getUserAccountById(user.id).then(function (userAccount) {
//可以访问user和userAccount
});
});

注意使用promise时的整体结构

假定doSomething()和doSomethingElse()都返回了promise对象

常用方式：

常用变通方式：

函数的arguments[0]== resultOfDoSomething |------------------| finalHandler(resultOfDoSomethingElse) |------------------|

错误方式1：

函数是return undefined，所以下一个then方法无需等待新promise的状态，会马上执行回调。 |------------------| finalHandler(undefined) |------------------|

错误方式2：

函数在注册时就直接被调用 |----------| finalHandler(resultOfDoSomething) |------------------|

原文链接：https://www.f2er.com/js/41299.html

JavaScript中Promise的使用详解

猜你在找的JavaScript相关文章