异步

什么是异步

​ 同步就像舔狗，你和女神聊天的时候，女神没有回你消息，你就什么都不干，一直等女神回消息 。异步就像海王，在和妹子A聊天的时候，妹子A没有回消息，就先和另外一个妹子B聊天，当妹子A回消息的时候在回来和妹子A聊天。这可以让海王撩妹的效率大大提高

​ 在JavaScript中的异步任务是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程，当我们打开网站时，文件的加载，ajax请求，延时定时函数等其实就是一个异步任务，这也使得运行的效率大大提高。

异步出现的第一个问题

文件的加载和海王聊天又不一样，有时候文件A需要文件B的依赖，所以要先加载完文件B在加载完文件A，而异步加载完毕的顺序是不固定的。

解决这个问题的方法就是将文件A的请求写在文件B请求的回调函数里。

第二个问题

当文件A依赖文件B，文件B依赖文件C，一直这样依赖好几个，就又会发现一个问题，那就是循环嵌套，看的眼睛都花了，极其难以维护和阅读。

为了解决这个问题就出现了promise，promise将无限套娃变成火车车厢

Promise的使用

1. promise最基本的使用:

   new Promise(function(resolve, reject) {
     // resolve();//执行成功的结果
     reject()//执行失败的结果
   }).then(
     value=>{
         console.log('任务一成功');
     },
     reason=>{
         console.log('任务一失败');
     }
   ).then(//这里又返回一个新的promise，所以可以接着用then方法
     value=>{
         console.log('任务二成功');
     },
     reason=>{
         console.log('任务二失败');
     }
   )
   
   
   

2. 主任务，宏任务，微任务

 setTimeout(function() {
     console.log('宏任务');
 })
 new Promise(function(resolve, reject) {
     resolve();
     console.log('主任务');
 }).then(//promise返回后才会添加到微任务中
     value=>{
         console.log('微任务');
     }
 )
 console.log('主任务2');
 
 //执行顺序为主任务-微任务-宏任务，当为同一类型的任务，执行顺序一般为从上到下

3. promise状态：准备状态，成功状态，失败状态，状态不可逆，不能中断

    
    new Promise(function(resolve, reject) {
        resolve();//已经进入成功状态，下面的失败状态就不会发生改变
        reject();
    }).then(
        value=>{
            console.log('成功');
        },
        reason=>{
            console.log('失败');
        }
    )
   

4. promise的then方法是接的事上一个返回的promise的状态

    let p1= new Promise((resolve, reject) => {
        reject()
    })
    
    new Promise(function(resolve, reject) {
        resolve(p1);//返回p1的状态
    }).then(
        value=>{
            console.log('成功');
        },
        reason=>{
            console.log('失败');
        }
    )
    
   

5. promise的catch方法放最后统一获取错误，失败状态

    new Promise(function(resolve, reject) {
     reject('失败');
    })
    .then(
     value=>{
         console.log('任务一成功');
     }
    )
    .then(//这里又返回一个新的promise，所以可以接着用then方法
     value=>{
         console.log('任务二成功');
     }
    )
    .catch(reason=>{
        console.log('catch'+reason);
    })
   

6. promise的finally方法，无论成功与否都会执行

    new Promise(function(resolve, reject) {
     resolve('成功');//执行成功的结果
     reject('失败')//执行失败的结果
    }).finally(function() {
        console.log('一直执行');
    }).catch(function(err) {
    console.log(err);
    })
   

7. promise的resolve方法，相当于直接获取成功的状态

8. promise的reject方法，相当于直接获取失败状态

9. promise的all方法，当成功时获取的都是成功的状态

    let p1=new Promise((resolve, reject) => {
        resolve('成功1');
    })
    
    let p2=new Promise((resolve, reject) => {
        resolve('成功2');
    })
    
    Promise.all([p1,p2]).then(result=>{
        console.log(result);
    })
   

10. promise的allSettled方法，可以不同的promise把成功和失败的状态全部获取

     let p1=new Promise((resolve, reject) => {
         // resolve('成功1');
         reject('失败')
     })
     
     let p2=new Promise((resolve, reject) => {
         resolve('成功2');
     })
     
     Promise.allSettled([p1,p2]).then(result=>{
         console.log(result);
     })
    

11. promise的race方法，可以获取不同promise的状态，但只会获取最快的一个

     let p1=new Promise((resolve, reject) => {
         setTimeout(() => {
             resolve('成功1');
         },1000)
     })
     
     let p2=new Promise((resolve, reject) => {
         resolve('成功2');
     })
     
     Promise.race([p1,p2]).then(result=>{
         console.log(result);
     })
    

async,await的使用

async和await是promise的语法糖，async相当于new Promise，await相当于then

​