本文主要是介绍Promise的基础语法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

• 前言
• 一、基本用法
• 二、Promise.prototype.then
• 三、Promise.prototype.catch
• 总结

前言

通俗理解，原生JS 提供 Promise 构造函数，通过 Promise 实例化的对象（ 以下简称 Promise对象 ） 相当于一个容器，里头封装了异步操作及其结果，可以通过调用 Promise对象的 then 方法来进一步处理异步操作的结果

一、基本用法

1. 定义一个 Promise 对象，该对象有三个状态，pending （进行中）、resolved （成功）和 rejected （失败），下面 第 3 点 会讲到该对象的状态在什么情况下会改变

let p = new Promise()

2. Promise 构造函数需要传入实参，实参是一个 回调函数，回调函数有两个参数，第一个是 resolve, 第二个是 reject，这两个参数由 JS 引擎提供，可以直接使用

let p = new Promise(function(resolve , reject){
        })

3. 在回调函数内部 封装异步操作，在此异步操作用 延时定时器 示例。在延时定义器的回调函数中需要使用 resolve 和 reject 这两个函数。resolve 的作用是，在异步操作成功时调用，调用 resolve 会把 Promise 对象的状态从 pending 变成 resolved ，同时需要将 异步操作的执行结果 作为参数传给 resolve；而 reject 恰好相反，在 异步操作失败后 调用，调用 reject 会把 Promise 对象的状态从 pending 变成 rejected，同时需要将 异步操作报出的错误 作为参数传给 reject；resolve 和 reject 的参数会被 Promise 对象传递出去

let p = new Promise(function(resolve , reject){
            //封装异步操作
            setTimeout(() => {
                //成功时
                let data = '数据库中的用户数据'
                //调用resolve
                resolve(data)
                //失败时
                let err = '数据传输失败'
                //调用reject
                reject(err)
            },1000)
        })

4. 调用 Promise 对象的 then 方法，传入两个参数（可选），第一个是 Promise 对象 状态为 resolved 时的 回调函数，第二个是 Promise 对象 状态为 rejected 时的 回调函数；这两个回调函数各有一个参数，value 和 reason （形参名字可以自定义），该参数是 Promise 对象传出的参数（也就是第 3 点中 resolve 和 reject 的参数），在回调函数中可以处理 value 和 reason

p.then(function(value){
    console.log(value)
} , function(reason){
    console.log(reason)
})

二、Promise.prototype.then

then 方法是 Promise 构造函数原型对象中的方法，它的特点如下：

调用 then 方法，then 方法的返回值是一个 Promise 对象（注意：不是调用 then 方法的那个 Promise 实例），以下简称 P2，这个对象的状态由 then 的参数，也就是回调函数的执行结果来决定，分成三种情况

1. 如果回调函数的返回值是 非 Promise 类型的数据， 则 P2 状态为 resolved，并将该返回值作为参数传递出去

 let p2 = p.then(value => {
           return 123
       })
 console.log(p2)
 
 //打印结果
 Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled" //resolved状态
[[PromiseResult]]: 123

上面代码表示 Promise 对象调用 then 方法后，传入异步操作成功后的回调函数，在回调函数内返回一个非 Promise 类型的值，那么，打印 then 方法的返回值会发现 P2 的状态显示为 fullfilled，回调函数的返回值123被传递出去

2. 如果回调函数的返回值是 Promise 对象， 则 P2 状态和该Promise 对象 同步，也就是说，该 Promise 对象是 resolved 状态，P2就是 resolved 状态，反之亦然，并将 resolve/reject 函数的参数传递出去

 let p2 = p.then(value => {
     return new Promise((resolve , reject) => {
          setTimeout(() => {
          let data = '商品数据'
          resolve(data)
          } ,1000)
          })
     })
//prints:
Promise {<pending>}
__proto__: 
Promise[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "商品数据"

上面代码中，返回一个 Promise 对象，异步操作内调用 resolve 函数，把该 Promise 对象的状态变成 resolved (fullfilled)，resolve函数的参数 data 传递出去，P2的状态也变成 resolved，这时，调用 P2的 then 方法，可以处理传递出去的参数 data

 let p2 = p.then(value => {
            return new Promise((resolve , reject) => {
               setTimeout(() => {
                   let data = '商品数据'
                   resolve(data)
               } ,1000)
            })
        }).then(value => {
            console.log(value) //商品数据
        })

上面代码中，再次调用 then 方法的方式属于 链式调用，value的输出值就是 data，即商品数据

三、Promise.prototype.catch

catch 方法用于指定发生错误时的回调函数

 let p = new Promise ((resolve , reject) => {
            reject('出错啦！')
        })

        p.catch((reason) => {
            console.log(reason)//出错啦！
        })

上面代码中，p 的状态为 rejected，可以调用 then 方法 或 catch 方法，catch 方法的用法和 then 方法类似，不同的是 catch 方法只需要传入一个回调函数

总结

通过 Promise 处理异步操作，then 方法的链式调用可以解决回调地狱的问题

这篇关于Promise的基础语法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！