Promise

语法

new Promise( function(resolve, reject) {...} ); //reject参数 可不选

参数

executor

executor是带有 resolve 和 reject 两个参数的函数 。Promise构造函数执行时立即调用executor 函数, resolve 和 reject 两个函数作为参数传递给executor(executor 函数在Promise构造函数返回新建对象前被调用)。resolve 和 reject 函数被调用时,分别将promise的状态改为fulfilled(完成)或rejected(失败)。executor 内部通常会执行一些异步操作,一旦完成,可以调用resolve函数来将promise状态改成fulfilled,或者在发生错误时将它的状态改为rejected。
如果在executor函数中抛出一个错误,那么该promise 状态为rejected。executor函数的返回值被忽略。

新的promise实例

let promise = new Promise((resolve, reject) = > {
    setTimeout(() = > {
        let random = Math.random()
        if (random > 0.5) {
            resolve(`resolve$ {random}`)
        } else {
            resolve(`reject$ {random}`)
        }
    }, 1000)
})

由上所示,Promise的构造函数接收一个函数作为参数,该函数接受两个额外的函数,resolve和reject,这两个函数分别代表将当前Promise置为fulfilled(已成功)和rejected(已失败)两个状态。Promise正是通过这两个状态来控制异步操作的结果。接下来我们将讨论Promise的用法,实际上Promise上的实例promise是一个对象,不是一个函数。在声明的时候,Promise传递的参数函数会立即执行,因此Promise使用的正确姿势是在其外层再包裹一层函数。

let run = function() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
        let random = Math.random()
        if (random > 0.5) {
            resolve(`resolve:${random}`)
        } else {
            reject(`reject:${random}`)
        }
    }, 1000)
})
}

run()

这是Promise的正常用法,接下来,就是对异步操作结果的处理,接着上面创建的函数run()

run().then(
function(value) {
    console.log(value)
})

每个Promise的实例对象,都有一个then的方法,这个方法就是用来处理之前各种异步逻辑的结果。

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
下面是一个用Promise对象实现的 Ajax 操作的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript异步</title>
</head>
<body>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script>
    new Promise((resolve, reject) => {
        $.ajax({
            url: "https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/promisetest",
            success: res => {
                if (res.code == 0) {
                    resolve(res.data)
                } else {
                    reject(res.desc)
                }
            }
        });
    })
        .then(res => {
            console.log(res);
        },err =>{
            console.log(err)
        })

</script>

</body>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容