Promise 简单入门

Promise可以封装异步请求，可以让类似文件读取，ajax变得更加优雅，那Promise具体怎么使用呢，下面是我用半天从b站的视频教程中学的基本使用方法，记录一下，后面自己要用也方便

一、promise相关知识点

1、Promise的状态

实例对象的一个属性【PromiseState】

pending 未决定的
resolved / fullfilled 成功
rejected 失败

promise的状态改变

调用resolve函数触发pending变为resolved
调用reject函数触发或者抛出错误也会触发pending变为rejected

只有这两种，且一个promise对象只能改变一次，无论变为成功还是失败，都会有一个结果数据，成功的结果数据一般称为value，失败的结果数据一般称为reason。

2、promise 对象的值

实例对象的另一个属性【PromiseResult】
保存对象【成功/失败】的结果

resolve
reject

3、是状态先改变还是then指定的回调先执行

如果先指定的回调，也就是then先，那当状态发生改变时，回调函数就会调用，得到数据
如果先改变状态，那当指定回调，也就是then的时候，回调函数就会调用，得到数据
所以都是一样的，都可以拿到数据

4、链式调用

promise的then()返回一个新的promise，可以用then()进行链式调用，通过then()的链式调用串连多个同步/异步任务

想要中断promise调用链，有且只有返回一个pending状态的Promise对象才行

return new Promise(() = >{});

二、基本使用例子定时任务

1、body里面定义好点击事件

    <div id="a">setTimeout</div>

2、js脚本中使用

    const a = document.querySelector("#a");
    a.addEventListener('click',function(){
    const p = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            let n =Math.random()*100+1;
            if(n<=30){
                //成功
                resolve(n);
            }else{
                //失败
                reject(n);
            }
        },1000);
    });
    p.then((value)=>{
        alert("成功"+value);
    },(reason)=>{
        alert("失败"+reason);
    });
  });

其实使用很简单，就是用Promise对象把异步任务包裹起来，如果异步任务运行成功，则调用resolve方法，如果异步任务运行失败则调用reject方法，然后then方法就可以渠道对应的成功失败结果。

三、基本使用例子ajax

1、body里面定义好点击事件

<div id="b">ajax</div>

2、js中脚本

    const b = document.querySelector("#b");
    b.addEventListener('click',function(){
        const p = new Promise((resolve,reject)=>{
            //1、创建对象
            const xhr = new XMLHttpRequest();
            //2、初始化
            xhr.open('POST','https://www.baidu.com');
            //3、发送
            xhr.send();
            //4、处理响应结果
            xhr.onreadystatechange=function(){
                if(xhr.readState===4){
                    //判断响应状态码为2xx
                    if(xhr.status >=200 && xhr.status<300){
                        //alert("请求成功");
                        resolve(xhr.response);
                    }else{
                        //alert("请求失败"+xhr.status);
                        reject(xhr.status);
                    }
                }
            }
        });
        p.then((value)=>{
            alert(value);
        },(reason)=>{
            alert(reason);
        });
  });

其实跟上面setTimeout差不多原理
我们还可以把ajax请求直接封装为一个方法

  //封装ajax请求
  function sendAjax(url){
        return new Promise((resolve,reject)=>{
        //1、创建对象
        const xhr = new XMLHttpRequest();
        //2、初始化
        xhr.open('POST',url);
        //3、发送
        xhr.send();
        //4、处理响应结果
        xhr.onreadystatechange=function(){
            if(xhr.readState===4){
                //判断响应状态码为2xx
                if(xhr.status >=200 && xhr.status<300){
                    //alert("请求成功");
                    resolve(xhr.response);
                }else{
                    //alert("请求失败"+xhr.status);
                    reject(xhr.status);
                }
            }
        }
    });
  }
  //调用
  sendAjax("https://www.baidu.com").then(value=>{
    alert(value);
  },reason=>{
    alert(reason);
  })

四、async和await结合发送ajax请求

1、body里面点击事件

<div id="c">async await ajax</div>

2、js里面简单的代码

  const c = document.querySelector("#c");
  c.addEventListener('click',async function(){
     let res = await sendAjax('https://www.suibibk.com');
     console.log(res);
  });

上面用的sendAjax是之前封装的，可以看出，这样封装后更加简单方便，清晰明了，页面不用每个地方都写很长的回调处理。

具体参考视频：https://www.bilibili.com/video/BV1GA411x7z1?p=1&vd_source=859683ebd7a7e5dbcb82