国内购物网站排名,小说网站建设方案书ppt模板,常州seo建站,斗门区建设局网站1. Promise是什么
Promise简单来说就是一个容器#xff0c;里面保存着未来才会结束的事件的结果#xff08;这个事件就是异步操作#xff09;。Promise是一个对象#xff08;构造函数#xff09;#xff0c;可以获取异步操作的结果。
特点#xff1a; 对象的状态不受外…1. Promise是什么
Promise简单来说就是一个容器里面保存着未来才会结束的事件的结果这个事件就是异步操作。Promise是一个对象构造函数可以获取异步操作的结果。
特点 对象的状态不受外界影响。有三种状态分别是Pending(进行中)、Fulfilled(已成功)、Rejected(已失败)这三种状态只能是异步的结果决定其他操作都不能改变。 状态改变后不会再变任何时候都可以得到这个结果。状态改变只有两种情况分别是进行中变成成功、进行中变成失败。就是算已经发生变化再对Promise添加回调函数 也会立即得到这个结果而事件event则是错过了监听就得不到结果了。
2. 为什么会出现Promise
因为之前解决异步操作使用回调函数会嵌套多层影响编写阅读而Promise的出现更容易实现使异步操作可以看出同步操作阅读更容易。
3. Promise基本用法
const promise new Promise((resolve, reject) {if (/* 异步操作成功*/) {resolve(value)} else {reject(value)}
})Promise构造函数接受一个函数作为参数这个函数有两个参数分别是resolve、reject,这两个参数也是函数。
resolve的作用就是将Promise对象的状态从进行中变为成功,在异步操作成功时进行调用并将异步操作的结果作为参数传递出去。
reject的作用就是将Promise对象的状态从进行中变为失败,在异步操作失败时进行调用并将异步操作的错误结果作为参数传递出去。
1. then回调函数
当Promise实例生成后可以使用then方法分别指定resolved和rejected状态的回调函数
then方法接受两个回调函数作为参数第一个参数是Promise对象状态变为resolved时调用第二个参数是Promise对象状态变为rejected时调用其中第二个参数是可选的 这两个函数的参数都是Promise对象传过的值当作为参数。
promise.then((value) {// 成功执行的代码
}, (error) {// 失败执行的代码
})2. then方法执行顺序
Promise对象建立后会立即执行但是then方法指定的回调函数会在当前脚本所有同步任务执行完成后才会执行。通俗讲比如说现在处在一个方法中then后还有代码 比如正常的代码或者异步代码它执行时会自动在正常代码同步后面执行。
const promise () {new Promise((resolve, reject) {console.log(Promise实例)resolve(hello)}).then(result {console.log(.then方法)})console.log(Promise外的打印);const list [1, 2, 3];list.map((item, index) {console.log(item, map打印 index);})
}
promise(); 3. resolve、reject函数的参数
reject函数的参数通常是Error对象的实例表示抛出的错误。
resolve函数的参数除了正常值外可以是Promise实例如果是Promise实例则需要特别的注意。
如果传入的是一个实例p2则本实例p1的状态取决于传入p2的状态假如p1将要变成成功的状态而传入的p2则为失败状态则p1会执行失败状态时的代码。p1会等待p2实例的状态转变。
const p2 new Promise((resolve, reject) {reject(new Error(fail));
})const p1 new Promise((resolve, reject) {resolve(p2);
})p1.then((result) {console.log(result);
}).catch((error) {console.log(error);
})
// 打印结果为Error: failp2实例返回一个失败本来p1是返回成功的执行then方法然后传入的参数是p2,而p2是一个实例则此时的状态由p2决定因此执行的是catch方法。
4. resolve 代码执行顺序
resolve函数所处脚本位置代码执行顺序和then方法一样都是在本轮事件循环的末尾执行总是晚于本脚本的同步任务。
const resolve () {new Promise((resolve, reject) {resolve(状态成功后传递的值);console.log(脚本其他同步代码);}).then((result) {console.log(result);})
}
resolve();从上面的代码可以看出resolve函数后面的代码先执行了。
其实按正常来说resolve返回了成功时传递的信息Promise也就完成了自己的使命后面就不应该再有代码出现了因此当书写代码时应该写在最后或者可以使用 return语句这样不会产生意外。
new Promise((resolve, reject) {return resolve(1);// 这样后面的语句不会执行console.log(2);
})4. Promise.prototype.then()
then方法是定义在了Promise实例原型对象上作用就是为Promise实例状态改变时添加回调函数。
then方法的第一个参数是成功状态的回调函数第二个参数可选是失败状态的回调函数。
then方法会返回一个新的Promise实例不是之前的Promise实例因此可以采用链式写法可以接多个then方法如果有多个then的方法前面then方法 返回的结果会当成参数传入下一个回调函数。
5. Promise.prototype.catch()
catch方法其实就是then的第二个参数用来指定发生错误时的回调函数。
在捕获错误时若then方法抛出错误也会捕获到。具有冒泡性质抛出错误后会一直传递直到被捕获为止。如果没有catch方法如果出错不会传递到外层没有任何反应
const someAsyncThing () {return new Promise((resolve, reject) {// 下面一行报错因为x没有声明resolve(x 1);})
}
someAsyncThing();上面加上一个catch方法或者then的第二个参数就能抛出错误。
catch方法一定要放在最后。
catch方法返回一个Promise对象后面也是可以继续调用then假如then方法抛出错误若后面没有catch方法则不能被捕获到。
如果状态已经变为失败再抛错误无效
const catchError () {new Promise((resolve, reject) {resolve(ok);throw new Error(发生错误);}).then((result) {console.log(result);}).catch((err) {console.log(err);})
}
catchError();6. Promise.all()
Promise.all方法就是将多个Promise实例包装成一个新的Promise实例。
const p Promise.all([p1, p2, p3]);要求
参数是一个数组形式且每一项必须为Promise实例假如不是实例则会调用Promise.resolve转化成Promise实例。
1. 新实例的状态
p的状态由参数的状态决定分为两种情况。
第一种所有的参数状态都变成Fulfilled成功则新实例变成Fulfilled所有参数的返回值会组成一个数组传递给新实例的回调函数。
第二种如果有一个参数的状态变为Rejected失败则实例会变成Rejected则会把这个结果传递给新实例的回调函数。
2. 参数实例是否有catch方法 如果作为参数的Promise实例自定义了catch方法那么它被rejected时并不会触发Promise.all()的catch方法 这是为什么
因为假如参数实例有catch方法时执行完catch方法会返回一个新的Promise实例此时的参数实例就会变为新返回的实例 会变成resolved状态会将catch方法执行完返回的值传递给all方法的回调函数。
// 参数p2有catch方法最终结果为 [hello, Error: 报错了]
const p1 new Promise((resolve, reject) {resolve(hello)}).then(result result).catch(e e);const p2 new Promise((resolve, reject) {throw new Error(报错了);}).then(result result).catch(e e);Promise.all([p1, p2]).then(result console.log(result)) // [hello, Error: 报错了].catch(e console.log(e));// 参数p2没有catch方法会执行all的catch方法输出Error: 报错了
const p1 new Promise((resolve, reject) {resolve(hello)
}).then(result result).catch(e e);const p2 new Promise((resolve, reject) {throw new Error(报错了);
}).then(result result)Promise.all([p1, p2]).then(result console.log(result)).catch(e console.log(e)); // Error: 报错了由此可见假如项目中如果要求参数全部为成功的状态则每个参数尽量不要写catch方法直接将catch方法写在all中。例如上传多张图片只有多个图片 上传成功后再请求接口这样catch方法不能单个写。
7. Promise.race()
和Promise.all()类似也是将多个Promise实例包装成一个新Promise实例参数为数组。只不过是参数中只要有变化新实例的状态就会发生改变。
Promise.all是且关系Promise.race是或关系
8. Promise.resolve()
功能是将一个对象转为Promise对象。
参数是一个Promise实例
如果是Promise实例会直接原封不动的返回。
参数是thenable对象 thenable对象指的是具有then方法的对象。Promise.resolve方法会将对象转为Promise对象然后立即执行其中的then方法。
const able {then(resolve, reject) {resolve(1);}
}const p1 Promise.resolve(able);
p1.then((value) {console.log(value); // 1
})
参数不具有then方法的对象或者更不不是对象
返回的实例就是Resolved状态会直接执行回调函数。
不带任何参数
就是返回一个Promise对象但需要记住的是会在本轮事件循环结束时执行
8. Promise.reject()
生成一个状态未Rejected的Promise实例。
9. done()
因为不管then还是catch都是返回一个新的实例可以采用链式写法所以最后都以thencatch结尾针对最后一个方法如果可能抛出错误就可能无法捕获到 可以使用done方法。永远处于尾端。
Promise.prototype.done function (){this.then().catch((error) {// 抛出一个全局错误throw new Error(error);})
}10. finally()
也是用于末尾与done最大的区别在于实例对象的最后状态不管是什么都会执行接受一个回调函数作为参数。
Promise.prototype.finally function (callback) {const p this.constructor;return this.then((result) p.resolve(callback().then(() value)),(reason) p.resolve(callback().then(() reason)),)
}
