Promise(一)

最新推荐文章于 2024-07-28 21:06:01 发布

那个雨季

最新推荐文章于 2024-07-28 21:06:01 发布

阅读量132

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_43534980/article/details/119769210

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了Promise的基本用法，包括 resolve 和 reject 的作用，以及如何使用 then 和 catch 处理异步操作的结果。同时，通过示例展示了如何结合Promise与Ajax进行多个异步请求，分别演示了Promise.all和Promise.race的用法，前者等待所有请求完成，后者则在第一个完成的请求后返回结果。

摘要由CSDN通过智能技术生成

1. Promise的基本用法：

function foo() {
      return new Promise(function(resolve, reject){
    // resolve是用来包装要返回的promise对象数据
        setTimeout(function(){
          // resolve(123);
          reject('error');
        }, 100);
      })
    }
    // foo()
    //   .then(function(data){
    //     console.log(data)
    //   })
    //   .catch(function(data){
    //     console.log(data)
    //   })
    //   .finally(function(){
    //     console.log('finished')
    //   });

    // --------------------------
    // 两种写法是等效的
    foo()
      .then(function(data){
        console.log(data)
      },function(data){
        console.log(data)
      })
      .finally(function(){
        console.log('finished')
      });

2.Promise结合ajax发送请求多个异步请求

function queryData(url) {
      return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
    }

    var p1 = queryData('http://localhost:3000/a1');
    var p2 = queryData('http://localhost:3000/a2');
    var p3 = queryData('http://localhost:3000/a3');
    // Promise.all([p1,p2,p3]).then(function(result){
    //   console.log(result)
    // })
    Promise.race([p1,p2,p3]).then(function(result){
      console.log(result)
    })