Promise异步操作

promise在js中表示一个异步操作的最终结果是成功还是失败,它的本质是一个对象。

promise的原理

promise在js中是用来处理异步操作的,新建一个promise对象,传输一个可能成功或失败的函数,这个函数有两个形参,resolve与reject,resolve会接收函数成功后的回调函数,reject会接收函数失败后的回调函数。

当函数成功或者失败后,并不会直接返回结果,而是返回一个未结束的新的promise对象。于是Promise对象就成为了一个待执行pending事件,既没有结束,也没有运行,存储在内存中等待后续操作。

let myPromise = new Promise(function (resolve, reject) {
    console.log('判断语句');
})
//返回的是一个新的Promise对象

当函数执行完毕后,我们可以执行.then方法来接收新的promise对象,.then方法的两个对象会分别接收成功与失败的回调函数。让异步操作也可以像同步操作一样返回值。

let myPromise = new Promise(function (resolve, reject) {
    console.log('判断函数');
}).then(function (sucsess) {
    console.log('成功的函数');
}, function (failure) {
    console.log('失败的函数');
})

链式调用

promise对象返回一个新的promise对象这个特性可以允许函数的多次调用,这种方式可以很好的解决回调地狱的问题。

回调地狱

回调地狱从何而来?人们想要让一系列函数按顺序执行,在之前就只能在函数内调用另一个函数,这种多次在函数内调用函数的行为就是回调地狱。

  • 缺乏顺序性,调试困难,和大脑的思维方式不符,(内部函数结束后外部函数才能结束)
  • 多层嵌套之间关系性强,代码难以改动
  • 嵌套过多难以处理错误
let Fn = () => {
    console.log('第一个执行');
    () => {
        console.log('第二个执行');
        () => {
            console.log('第三个执行');
        }
    }
}

 链式调用就是在多次调用.then函数,因为调用.then函数时前面的代码已经结束,所以可以按照从上到下的顺序执行,这样代码逻辑也更加清晰。

let myPromise = new Promise(function (resolve, reject) {
    console.log('第一个执行的函数');
}).then(function () {
    console.log('第二个执行的函数');
}).then(function () {
    console.log('第三个执行的函数');
})

错误返回

通过.catch方法可以捕获错误,当我们在promise对象中抛出一个错误时,可以通过catch来捕获这个错误,如果这个错误与catch方法中间还有事件,那么会跳过这个事件直接执行catch方法

let myPromise = new Promise(function (resolve, reject) {
    console.log('第一段代码');
}).then(function () {
    console.log('抛出一个错误');
}).then(function () {
    console.log('第二段代码');
}).catch(function () {
    console.log('发现错误');
})
//输出
第一段代码
发现错误

catch方法也会返回一个新的promise对象,所以我们可以在错误后继续编写代码,为我们提供了非常大的便利。

下图为promise运行流程图

Promise异步操作_第1张图片

 除此之外promise也为我们提供了很多方法

promise.all()

接收一个promise的iterable类型的输入,并只返回一个promise实例,当接收的全部为resolve回调时会返回一个数组,如果返回的回调中有reject则会返回第一个错误信息。

Promise.allSettled()

Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilledrejected后的promise,并带有一个对象数组,每个对象表示对应的promise结果。

Promise.any()

Promise.any() 接收一个promise可迭代对象,只要其中的一个 promise 成功,就返回那个已经成功的 promise 。如果可迭代对象中没有一个 promise 成功(即所有的 promises 都失败/拒绝),就返回一个失败的 promise。

Promise.prototype.finally()

finally() 方法返回一个 promise 。在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。

Promise.race()

Promise.race(iterable) 方法返回一个 promise,一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝。

Promise.reject()

Promise.reject()方法返回一个带有拒绝原因的Promise对象。

Promise.resolve()

Promise.resolve(value)方法返回一个以给定值解析后的Promise 对象。如果这个值是一个 promise ,那么将返回这个 promise ;如果这个值是thenable(即带有"then" 方法),返回的promise会“跟随”这个thenable的对象,采用它的最终状态;否则返回的promise将以此值完成。此函数将类promise对象的多层嵌套展平。

Promise.prototype.then()

then() 方法返回一个 Promise (en-US)。它最多需要有两个参数:Promise 的成功和失败情况的回调函数。

Promise.prototype.catch()

catch() 方法返回一个Promise (en-US),并且处理拒绝的情况。

你可能感兴趣的:(javascript,es6,前端)