ES6中的promise对象及其应用

目录

一、promise承诺对象

二、使用promise封装ajax或者axios

三、promise静态方法

1.Promise.all()

2.Promise.any()

3.Promise.race()

4.Promise.allSettled()

5.Promise.resolve()

6.Promise.reject()

四、防抖

五、节流

六、事件循环

---

一、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执行回调函数 ---------请求失败执行回调函数
  })构造函数创建实例对象

---

二、使用promise封装ajax或者axios

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

---

三、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实例

---

四、防抖

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

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

---

五、节流

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

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

---

六、事件循环

        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

---