对Promise的理解以及Promise的基本用法

小草莓蹦蹦跳

已于 2023-09-05 18:06:13 修改

阅读量5.8k

点赞数 11

分类专栏： JavaScript 每日专栏 ES6 文章标签： javascript 前端 vue.js

于 2020-07-18 16:11:12 首次发布

本文链接： https://blog.csdn.net/qq_38290251/article/details/107395152

版权

每日专栏同时被 3 个专栏收录

226 篇文章 5 订阅

订阅专栏

JavaScript

150 篇文章 2 订阅

订阅专栏

ES6

36 篇文章 0 订阅

订阅专栏

一、理解Promise

① 定义

② 优点

③ 特点

④ 缺点

二、Promise 基本用法

① resolve函数的作用

② reject函数的作用

③ then方法

④ 一个异步加载图片的例子

三、Promise的其他常见方法

① Promise.prototype.then()

② Promise.prototype.catch()

③ Promise.prototype.finally()

④ Promise.all()

⑤ Promise.race()

四、 Promise的常见面试题

一、理解Promise

① 定义

1）抽象表达：

Promise是一门新的技术（ES6引入）

Promise是JS中进行异步编程的新解决方案（旧解决方案是单纯使用回调函数）

异步编程包括：

fs文件读取操作、数据库操作、AJAX网络请求、定时器

2）具体表达：

从语法上来说，Promise是一个构造函数（可以进行对象的实例化）

从功能上来说，promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

3）总结：

Promise是ES6引入的异步编程的处理方案，有三种状态：pending（进行中）、resolved（已完成）、rejected（已失败）。从语法上说，Promise是一个构造函数，可以实例化对象。封装异步操作，获取成功和失败的结果。

当Promise的状态由 pending 转变为 resolved 或者 reject 时，会执行相应的方法。

② 优点

支持链式调用，可以解决回调地狱的问题。

ES6中的 promise 的出现给我们很好的 解决了回调地狱的问题，在使用ES5的时候，在多层嵌套回调时，写完的代码层次过多，很难进行维护和二次开发以及不便于异常处理。

指定回调函数的方式更加灵活。

旧方案必须在启动异步任务前指定回调函数，而promise是在启动异步任务后，返回promise对象，给promise对象绑定回调函数（甚至可以在异步任务结束后指定多个回调函数）。所以promise指定回调函数的方式更加灵活。

那我们可以把 promise 想象他是一种承诺，当它成功时执行一些代码，当它失败时执行一些代码。它更符合人类的行为思考习惯，而不在是晦涩难懂的冰冷语言。

③ 特点

只有异步操作的结果，可以决定当前是哪一种状态，任何其余操作都无法改变这个状态，也是“Promise”的名称的由来。同时，状态一旦改变，就无法再次改变状态。

从语法上说，Promise是一个对象，从他可以获取异步操作的消息。

④ 缺点

无法取消Promise，一旦新建他就会立即执行，无法中途取消。

其次，如果不设置回调函数，Promise内部跑出的错误无法反应到外部。当pending的时候，无法知道进展到了哪一步。

二、Promise 基本用法

ES6规定，Promise对象是一个构造函数，用来生成Promise实例。

下面代码创造了一个Promise实例。

const promise = new Promise(function(resolve, reject) {
    if(success) {
        resolve(value)
    } else {
        reject(error)
    }
})

① resolve函数的作用

将Promise对象的状态从"未完成"变成"成功"。（即从pending变为resolved）。

将promise状态设置为成功，在异步操作成功的时候调用，并将异步操作结果作为参数传递出去。

② reject函数的作用

将Promise对象的状态从"未完成"变成"失败"（即从pending变为rejected）。

将promise状态设置为失败，在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。

③ then方法

promise实例生成后，可以用then方法分别指定 resolved 状态和 rejected 状态的回调函数。

promise.then(function(value) {
  }, function(error) {
})

then方法可以接受两个回调函数作为参数

第一个回调函数：promise对象的状态变为resolved的时候调用；

第二个回调函数：promise对象的状态变为rejected时调用。

其中第二个函数是可选的，不一定需要提供。

这两个函数都接受Promise对象传出的值作为参数。

function timeout(ms) {    
        return new Promise((resolve, reject) => {
            // setTimeout 传参
            setTimeout(resolve, ms, 'done') 
        })
}

timeout(100).then((value) => {
    // done
    console.log(value)
})

上面代码中 timeout方法返回一个Promise实例，表示一段时间后才会发生的结果。过了指定的时间以后，Promise实例的状态变为 resolved，就会触发 then 方法绑定的回调函数。

let promise = new Promise(function(resolve, reject) {
    console.log('Promise')
    resolve()
})
promise.then(function() {
    console.log('resolved')
})

console.log('Hi')

// Promise   // Hi   // resolved

上面代码中，Promise新建后立即执行，所以首先输出的是Promise，然后then方法指定回调函数，将在当前脚本所有同步任务执行完成后才会执行，所以resolved最后输出。

④ 一个异步加载图片的例子

function loadImageAsync(url) {
    return new Promise(function(resolve, reject) {
        const image = new Image()     
        image.onload = function() {
            resolve(image)
        }   
        image.onerror = function() {
            reject(new Error('count not load...'))
        }
        image.src = url
    })
}

上面代码中，使用 Promise 包装一个图片加载的异步操作，如果加载成功就调用resolve方法，否则就调用rejected方法。