ES6 从入门到精通 # 17:Promise 的基本使用

简介: ES6 从入门到精通 # 17:Promise 的基本使用

说明

ES6 从入门到精通系列(全23讲)学习笔记。



Promise

Promise 相当于一个容器,保存着未来才会结束的事件(异步操作)的一个结果


  1. 对象的状态不受外界影响(Pending 进行中,Resolved 成功,Rejected 失败)
  2. 一旦状态改变,就不会再变,任何时候都可以得到这个结果
 let pro = new Promise((resolved, rejected) => {
 })
 console.log(pro)


3c5fc9a17fb64887a54c3a7e33daca6f.png

let pro = new Promise((resolved, rejected) => {
    let res = {
        code: 200,
        desc: "处理成功",
        data: {
            name: "kaimo"
        }
    }
    setTimeout(() => {
        if(res.code === 200) {
            resolved(res.data);
        } else {
            rejected(res.desc);
        }
    }, 1000)
})
pro.then(val => {
    console.log(val)
}, err => {
    console.log(err)
})


443901f6023341d589199d8412ff5c16.png


let pro = new Promise((resolved, rejected) => {
    let res = {
        code: 500,
        desc: "服务器内部异常",
    }
    setTimeout(() => {
        if(res.code === 200) {
            resolved(res.data);
        } else {
            rejected(res.desc);
        }
    }, 1000)
})
pro.then(val => {
    console.log(val)
}, err => {
    console.log(err)
})


b0ae083a9410434e8cff9ad20ef3a834.png


封装一下,可以传参数

function getData(ms) {
    return new Promise((resolved, rejected) => {
        setTimeout(() => {
            resolved("如果你追到我,我就让你嘿嘿嘿");
        }, ms)
    })
}
getData(1000).then(res => {
    console.log(res)
})



13a58c86331f40029020a400c8752ef1.png









目录
相关文章
|
前端开发
理解 ES6 中的 Promise
【10月更文挑战第24天】ES6 中的 Promise 是一种用于处理异步操作的机制,它提供了一种更优雅、更可控的方式来处理异步任务的结果。Promise 可以看作是对异步操作结果的一种承诺,它可以处于三种不同的状态:Pending(等待中)、Fulfilled(已完成,即成功)和 Rejected(已拒绝,即失败)。
|
前端开发
手写实现ES6的Promise.all()和Promise.race()函数
这篇文章介绍了如何手写实现ES6的`Promise.all()`和`Promise.race()`函数,提供了实现这两个Promise聚合函数的详细代码示例,并展示了如何使用它们。
272 2
手写实现ES6的Promise.all()和Promise.race()函数
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
205 1
|
前端开发 Java
说说你对es6中promise的理解?
说说你对es6中promise的理解?
110 1
|
前端开发 Java
说说你对es6中promise的理解?
说说你对es6中promise的理解?
|
前端开发 JavaScript
ES6新标准下JS异步编程Promise解读
ES6新标准下JS异步编程Promise解读
175 4
|
存储 前端开发 JavaScript
关于 ES6 中 Promise 的面试题
关于 ES6 中 Promise 的面试题
148 0
|
6月前
|
前端开发 JavaScript API
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
在前端开发中,异步编程至关重要。本文详解了同步与异步的区别,通过生活化例子帮助理解。深入讲解了 Promise 的概念、状态及链式调用,并引入 async/await 这一语法糖,使异步代码更清晰易读。还介绍了多个异步任务的组合处理方式,如 Promise.all 与 Promise.race。掌握这些内容,将大幅提升你的异步编程能力,写出更优雅、易维护的代码,助力开发与面试!
361 0
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
|
6月前
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
559 204
|
前端开发
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
649 155