Promise基础认识

Promise是解决异步编程的方案：回调地狱，代码难维护；promise可以支持多个并发请求，获取并发请求中的数据；可以解决异步编程问题，但不能说promise是异步的 

实例1：

const isPregnant = false

        const promise = new Promise((resolve, reject) => {
            if(isPregnant){
                resolve(`老师`)
            }else{
                reject(`工人`)
            }
        });

        promise
        .then(name=>{
            console.log(`小明成为了${name}!`);
        })
        .catch(name =>{
            console.log(`小明成为了${name}!`);
        })
        .finally(()=>{
            console.log(`小明月入百万`);
        });

 

 

Promise:

成功reslove:老师作为成功的值

失败reject:工人作为失败的值

调用函数promise，设置成功的返回结果，就是在then传入一个函数，函数这里设置参数name，这个name就是前面resolve保留的参数；同理失败的返回结果 ，在catch传入带name参数的函数，这个name是前面reject保留的参数；无论成功与否如何finally都返回这个结果

实例2：

图片异步加载：成功展示图片内容，失败提示图片有误

           const imgUrl = 'image/image 3.png'

           const imgPromise = ( url )=>{
           return new Promise((resolve, reject) => {
                const img = new Image();
                img.src = url
                img.onload = () =>{
                    resolve(img);
                };
                img.onerror = ()=> {
                    reject(new Error('图片有误'));
                };
            });
         };
         imgPromise(imgUrl)
         .then((img) => {
            document.body.appendChild(img);
         })
         .catch((err) => {
            document.body.innerHTML = err;
         });

onload 事件会在页面或图像加载完成后立即发生

onerror 事件在加载外部文件（文档或图像）发生错误时触发