Promise中then的简单使用

最新推荐文章于 2023-08-05 08:11:25 发布

youhebuke225

最新推荐文章于 2023-08-05 08:11:25 发布

阅读量258

点赞数

分类专栏： Promise 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/youhebuke225/article/details/128963960

版权

Promise 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了如何使用Promise处理异步操作，包括返回新的Promise实例，链式调用then方法以及返回对象包含then的情况。在每次调用test()时，都会创建一个新的Promise实例，且展示了在then中返回值如何影响后续链式调用。

摘要由CSDN通过智能技术生成

接收异步返回值

function test() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("hello world")
        }, 2000)
    })
}

test().then(res => {
    console.log(res); // hello
})

多次调用

多次调用拿到的都是新的promise实例的返回值

function test() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("hello world")
        }, 2000)
    })
}

test().then(res => {
    console.log(res); // hello world
})

test().then(res => {
    console.log(res); // // hello world
})

链式调用

本身具有返回值

他本身的返回值为promise对象，他会接收回调函数返回的值，然后把它包装成promise实例返回，所以他可以链式调用

test().then(res => {
    console.log(res); // hello world
}).then(res => {
    console.log(res); // undefined
    return "hello js"
}).then(res => {
    console.log(res); // hello js
})

返回一个promise

test().then(res => {
    console.log(res); // hello world
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("hello promise") 
        }, 2000)
    })
}).then(res => {
    console.log(res);// 打印完hello world 2s后，会打印 hello promise
})

返回一个对象，对象中有then

test().then(res => {
    console.log(res); // hello world
    return {
        then(resolve, reject) {
            resolve("hello then")
        }
    }
}).then(res => {
    console.log(res); // hello then
})