js三座大山之异步-Promise基本知识

相关问题总结：

1、什么是异步，与同步有何区别？为什么需要异步

异步执行某个任务不会阻塞运行，而同步任务会阻塞运行。js是单线程，执行某些需要等待的任务时会阻塞，这种情况需要使用异步。某个任务指的是网络请求、图片加载、定时任务。

2、手写Promise加载一张图片。以下实例能够表明Promise的几个特点：

        1）Promise创建实例时会立即调用传入构造函数的方法。

        2）then方法会在所有同步任务执行完后开始调用。

        3）Promise创建实例时传入的两个参数也是函数，这两个函数的作用是传值。程序正常运行时调用resolved，报错时调用rejected    

        4）then方法会传入一个函数，函数的参数是来自于之前调用resolved时传入的内容。

        5）then 方法中通过return 可以传值。实际效果相当于调用Promise.resolved或者Promise.rejected。也可以直接写上参数的内容，效果等同于Promise.resovled或rejected。

console.log("start")

new Promise((resolved,rejected) => {
    console.log("开始实例化了")
    var img = document.createElement("img")
    img.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwtkoss.weituk.com%2Fwp-content%2Fuploads%2F2020%2F10%2F005Iu2BQly1gjxzo22uhmj30yi22o49a.jpg&refer=http%3A%2F%2Fwtkoss.weituk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667699590&t=f5097c4ca0f653e7491256d87435a158"
    img.onload = () => {
        resolved(img.width)
    }
    img.onerror = () => {
        rejected(new Error("报错了"))
    }
}).then((param) => {
    console.log(param)
    return Promise.resolve("我来自第一个then")
}).then((param) => {
    console.log(param)
    return "我来自第二个then"
}).then((param) => {
    console.log(param)
}).catch((err) => {
    console.log(err)
})

console.log("end")

控制台打印结果：