个人随笔
目录
当前位置: 首页 JS Promise 简单入门
Promise 简单入门
2023-02-20 21:46:32

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对象才行

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

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

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

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

2、js脚本中使用

  1. const a = document.querySelector("#a");
  2. a.addEventListener('click',function(){
  3. const p = new Promise((resolve,reject)=>{
  4. setTimeout(()=>{
  5. let n =Math.random()*100+1;
  6. if(n<=30){
  7. //成功
  8. resolve(n);
  9. }else{
  10. //失败
  11. reject(n);
  12. }
  13. },1000);
  14. });
  15. p.then((value)=>{
  16. alert("成功"+value);
  17. },(reason)=>{
  18. alert("失败"+reason);
  19. });
  20. });

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

三、基本使用例子ajax

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

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

2、js中脚本

  1. const b = document.querySelector("#b");
  2. b.addEventListener('click',function(){
  3. const p = new Promise((resolve,reject)=>{
  4. //1、创建对象
  5. const xhr = new XMLHttpRequest();
  6. //2、初始化
  7. xhr.open('POST','https://www.baidu.com');
  8. //3、发送
  9. xhr.send();
  10. //4、处理响应结果
  11. xhr.onreadystatechange=function(){
  12. if(xhr.readState===4){
  13. //判断响应状态码为2xx
  14. if(xhr.status >=200 && xhr.status<300){
  15. //alert("请求成功");
  16. resolve(xhr.response);
  17. }else{
  18. //alert("请求失败"+xhr.status);
  19. reject(xhr.status);
  20. }
  21. }
  22. }
  23. });
  24. p.then((value)=>{
  25. alert(value);
  26. },(reason)=>{
  27. alert(reason);
  28. });
  29. });

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

  1. //封装ajax请求
  2. function sendAjax(url){
  3. return new Promise((resolve,reject)=>{
  4. //1、创建对象
  5. const xhr = new XMLHttpRequest();
  6. //2、初始化
  7. xhr.open('POST',url);
  8. //3、发送
  9. xhr.send();
  10. //4、处理响应结果
  11. xhr.onreadystatechange=function(){
  12. if(xhr.readState===4){
  13. //判断响应状态码为2xx
  14. if(xhr.status >=200 && xhr.status<300){
  15. //alert("请求成功");
  16. resolve(xhr.response);
  17. }else{
  18. //alert("请求失败"+xhr.status);
  19. reject(xhr.status);
  20. }
  21. }
  22. }
  23. });
  24. }
  25. //调用
  26. sendAjax("https://www.baidu.com").then(value=>{
  27. alert(value);
  28. },reason=>{
  29. alert(reason);
  30. })

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

1、body里面点击事件

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

2、js里面简单的代码

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

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

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

 144

啊!这个可能是世界上最丑的留言输入框功能~


当然,也是最丑的留言列表

有疑问发邮件到 : suibibk@qq.com 侵权立删
Copyright : 个人随笔   备案号 : 粤ICP备18099399号-2