ES6中的promise对象及其应用

发布时间：2023年12月17日

一、promise承诺对象

二、使用promise封装ajax或者axios

三、promise静态方法

1.Promise.all()

2.Promise.any()

3.Promise.race()

4.Promise.allSettled()

一、promise承诺对象

? 是一个容器，存放着将来才会执行代码，异步编程解决方法?

? 实例方法可以处理异步请求

? 实例状态：1.pending 未操作/进行中
? ? ? ? ? ? ? ? ? ? 2.fullfilled 已成功-------resolve
? ? ? ? ? ? ? ? ? ? 3.rejected 已失败---------reject

? 实例方法：
? ? ? ? ? 1.then(()=>{}) ?当promise实例状态为fullfilled时候执行then回调函数
? ? ? ? ? 2.catch(()=>{}) 当promise实例状态为rejected时候执行catch回调函数
? ? ? ? ? 3.finally(()=>{}) promise实例状态为任何执行回调函数
? Promise(参数：(resolve,reject)=>{
? ? resolve---promise实例状态为fullfilled执行回调函数--------请求成功执行回调函数
? ? reject ---promise实例状态为rejected执行回调函数 ---------请求失败执行回调函数
? })构造函数创建实例对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /**
     * promise 承诺对象 存放着将来才会执行得代码 主要获取异步操作得消息 可以对异步操作成功与否
     * 使用特定回调函数进行处理 异步编程解决方案 
    */
    let promise = new Promise((resolve,reject)=>{
      // resolve回调函数 表示promise实例为fullfilled得回调函数  请求成功执行得回调函数
      // reject回调函数 表示promise实例为rejected得回调函数 请求失败执行回调函数
      // 模拟异步请求
      if(3>2){
        resolve('请求成功')
      }else{
        reject('请求失败')
      }
    });
    // 当promise实例状态发生改变 可以调用实例方法进行处理 
    // then方法promise实例状态为fullfilled执行回调函数
    // catch方法当promise实例状态为rejected执行回调函数
    // finally 无论实例状态成功与否都会执行回调函数


    promise.then((res)=>{
      // resolve 由then方法第一个回调函数提供得
      console.log(res)
    }).catch((error)=>{
      // reject 由catch方法回调函数提供
      console.log(error)
    }).finally(()=>{
      console.log('最终执行')
    })


    // then可以接收两个回调函数 
    promise.then((res)=>{
      // 第一个回调函数表示promise实例状态为fullfilled执行回调函数
      console.log(res,'1111')
    },(error)=>{
      // 第二个回调函数表示promise实例状态为rejected执行回调函数----reject
      console.log(error,'2222')
    })
    console.log(Promise,'33333')
  </script>
</body>
</html>

二、使用promise封装ajax或者axios

? 封装工厂函数，得到一个基于promise的ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function getPromise(method,url,data,params){
      // data---post携带参数 params---get请求携带参数
      return new Promise((resolve,reject)=>{
        var xhr = new XMLHttpRequest();
        xhr.open(method,url);
        xhr.send();
        xhr.onreadystatechange = function(){
          if(xhr.readyState===4){
            if(xhr.status===200){
              resolve(xhr.response)
            }else{
              reject(xhr.responseText)
            }
          }
        }
      })
    }
    let p1 = getPromise('get','自己的服务器地址');
    let p2 = getPromise('get','自己的服务器地址');
    console.log(p1,p2);
    p1.then(res=>{
      console.log(JSON.parse(res),'111')
    })
    p2.then(res=>{
      console.log(JSON.parse(res),'222')
    });

  </script>
</body>
</html>

三、promise静态方法

1.Promise.all()

????????参数：实现了迭代器接口数据结构数组[多个promise实例]
????????得到一个promise实例对象所有实例请求成功或者所有实例都为fullfilled 实例才是fullfilled

2.Promise.any()

????????参数：实现了迭代器接口数据结构数组[多个promise实例]?
????????得到一个promise实例对象任意一个实例请求成功或者实例变为fullfilled 实例就是fullfilled

3.Promise.race()

????????参数：实现了迭代器接口数据结构数组[多个promise实例]?
????????赛跑那个实例状态先变为fullfilled 就返回哪一个实例

4.Promise.allSettled()

????????参数：实现了迭代器接口数据结构数组[多个promise实例]?
????????对每一个promise实例都进行处理

5.Promise.resolve()

????????得到状态发生改变(fullfilled)promise实例

6.Promise.reject()

????????得到状态发生改变(rejected)promise实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
   let res =  Promise.all([p1,p2]);
   let res =  Promise.any([p1,p2]);
   let res =  Promise.race([p1,p2]);
   let res =  Promise.allSettled([p1,p2]);
   console.log(res);
  res.then(res=>{
    console.log(res)
  })
  console.log(Promise.resolve(),'111');
  console.log(Promise.reject(),'222');
</script>
</body>
</html>

四、防抖

??目的：为了优化高频率js事件得手段

??在一定时间内，事件一直频繁触发，会重新计算时间，直到超过设定时间，函数才会执行最后一次

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
</head>

<body>
  <input type="text">
  <script>
    console.log(_);
    var input = document.querySelector('input');
    // 监听输入框事件
    // input.oninput = _.debounce(function(){
    //   console.log(this.value)
    // },1000)

    //zhangsan 
    let timer;
    input.oninput = function(){
      if(timer){
        clearTimeout(timer)
      }
      var that = this;
      timer = setTimeout(function(){
        console.log(that.value)
      },1000)
    }



    input.oninput = debounce(function () {
      console.log(this.value)
    }, 1000)
    // 封装防抖函数 
    function debounce(callback, wait) {
      let timer;
      return function () {
        if (timer) {
          clearTimeout(timer)
        }
        var that = this;
        timer = setTimeout(function () {
          console.log(this)
          callback.call(that);
        }, wait)
      }
    }
  </script>
</body>

</html>

五、节流

??目的：为了优化高频率js事件得手段

? 在一定时间内，事件一直频繁触发，会每隔设定时间函数才会执行一次

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
  <style>
    body {
      height: 3000px;
    }
  </style>
</head>

<body>
  <script>
    // window.onscroll = _.throttle(function () {
    //   console.log('我正在滚动')
    // }, 1000);

    window.onscroll = throttle(function () {
      console.log('我正在滚动')
    }, 1000);
    
    function throttle(callback, wait) {
      let id;
      return function () {
        if (!id) {
          id = setTimeout(function () {
            callback();
            id = null;
          }, wait)
        }
      }
    }
  </script>
</body>

</html>

六、事件循环

????????js单线程语言，同一时间只能做一件事情，异步代码会被放在任务队列中等待执行，先执行同步任务，再执行异步任务。

什么是同步任务？什么是异步任务？

? js任务分为同步任务和异步任务：

????????不耗时任务同步任务耗时任务就是异步任务?

? 异步任务又分为宏任务和微任务

? 宏任务：定时器setTimeout ?间歇调用 I/O操作文件读取(fs.readFile()) 网络请求

? 微任务：promise.then catch finally ?async await写在后面代码相当于创建微任务

//setTimeout第二个参数可以省略，默认为0     //2 4 5 7 10 3 8 6 1 9 
setTimeout(function () {
  console.log('1');
});                             
// new Promise((resolve,reject)=>{})
new Promise(function (resolve){
  console.log('2');
  resolve();
}).then(function () {
  console.log('3');
});
console.log('4');
async function async1() {
  console.log(5);
  const result = await async2();
  console.log(6);
}
async function async2() {
  console.log(7);
}
Promise.resolve().then(() => {
  console.log(8);
});
setTimeout(() => {
  console.log(9);
});
async1();
console.log(10); 

    //                            主线程：      异步队列：读取文件 fs.readFile() 网络请求
    //                                   打印2      微任务：打印3     宏任务：定时器打印1 
    //                                   打印4              打印8            定时打印9
    //                                   打印5              打印6
    //                                   打印7  
    //                                   打印10 3 8 6 1 9

文章来源:https://blog.csdn.net/l12345666777/article/details/134970589
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！