Promise介绍与使用

发表于 | 分类于

promise原理说起来并不难，它内部有三个状态，分别是pending，fulfilled和rejected 。

pending是对象创建后的初始状态，当对象fulfill（成功）时变为fulfilled，当对象reject（失败）时变为rejected。且只能从pengding变为fulfilled或rejected ，而不能逆向或从fulfilled变为rejected 、从rejected变为fulfilled

Promise 的简单使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// promise时对异步操作的封装 
new Promise((resolve, reject) => {
    // 请求代码
    setTimeout(() => {
        // 成功返回值时调用resolve
        resolve("第一次异步操作成功")
    }, 1000)
}).then((data) => {
    // 处理请求结果代码
    console.log(data);
    console.log("Hello World!");

    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // 返回错误值时调用
            reject("第二次异步返回失败！")
        }, 1000)
    }).then(() => {
        console.log("第二次异步");
    }).catch(err => {
        console.log(err);
    })
})

异步操作成功调用resolve函数传入处理结果，并在then中传入处理函数，失败则调用reject函数，并在catch中处理失败函数。

then可以传入第二个参数函数处理异步失败处理函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// promise时对异步操作的封装 
new Promise((resolve, reject) => {
    // 请求代码
    setTimeout(() => {
        // 成功返回值时调用resolve
        // resolve("第一次异步操作成功")
        reject("异步失败啦啦！")
    }, 1000)
}).then((data) => {
    // 处理请求结果代码
    console.log(data);
    console.log("Hello World!");
},err=>{
    console.log(err);
})

Promise 的链式操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 链式操作 
new Promise((resolve, resject) => {
    setTimeout(() => {
        resolve("第一次处理！")
    }, 1000)
}).then((data) => {
    console.log(data);
    return new Promise((resolve, resject) => {
        setTimeout(() => {
            resolve("第二次处理！")
        }, 1000)
    })
}).then((data) => {
        console.log(data);

        // ...
    })

依次在处理函数中new Promise来依次处理异步操作。

输出：

第一次处理!
第二次处理！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("我开始")
    }, 1000);
}).then(res => {
    console.log("第一层代码开始处理");
    return Promise.resolve(res + "学习") // 简写没有进行异步的代码 Promise.resolve = new Promise(resolve => {})
}).then(res => {
    console.log("第二层代码处理");
    return (res + "Promise")  // 进一步简写 省略Promise.resolve直接返回处理结果
}).then(res => {
    console.log("第三层代码处理");
    console.log("异步结果：", res);

})

输出结果

第一层代码开始处理
第二层代码处理
第三层代码处理
异步结果： 我开始学习Promise 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("我开始")
    }, 1000);
}).then(res => {
    console.log("第一层代码开始处理");

    // 简写处理失败
    return Promise.reject("err message")
    // 也可以手动抛出异常 
    // throw "err message"
}).then(res => {
    console.log("第二层代码处理");

    return res + "Promise"  // 进一步简写 省略Promise.resolve直接返回处理结果
        .then(res => {
            console.log("第三层代码处理");
            console.log("异步结果：", res);

        })
}).catch(err => {
    console.log(err);
})

最终输出

第一层代码开始处理
err message