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】

保存对象【成功/失败】的结果

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

如果先指定的回调，也就是then先，那当状态发生改变时，回调函数就会调用，得到数据

如果先改变状态，那当指定回调，也就是then的时候，回调函数就会调用，得到数据

所以都是一样的，都可以拿到数据

4、链式调用

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

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

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

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

    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方法就可以渠道对应的成功失败结果。

三、基本使用例子ajax1、body里面定义好点击事件

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

    const b = document.querySelector("#b");    b.addEventListener('click',function(){        const p = new Promise((resolve,reject)=>{            //1、创建对象            const xhr = new XMLHttpRequest();            //2、初始化            xhr.open('POST',';);            //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(";).then(value=>{    alert(value);  },reason=>{    alert(reason);  })

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

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

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