11. 异步学习

什么是异步

console.log(111);
setTimeout(()=>{
  console.log(222);
},0);
for(var i=0;i<1000;i++){
    console.log(222);//111 222*** 333
}

原因：js是单线程的，一次只能做一件事情，如果出现异步任务，那么就把异步任务放进异步队列里面，当同步队列执行完了，那么就去执行异步队列

所以说js同步的优先级高于异步

同步：正常的js语句

异步：setTimeout，ajax，dom，promise

ajax前端与后端交流的工具

作用

• 搜索信息
• 请求资源

回调地狱

异步调用之后回来执行的函数叫回调函数

Promise

//http状态码（200成功，304重定向，404找不到，500崩溃）
const p1=new Promise((resolve,reject)=>{
    //发送请求
    //...
    //请求完成的结果（成功/失败）
    if(res.status===200){
        resolve(res);
    }else{
        reject(res);
    }
});

p1.then((res)=>{
    console.log(res);
    //添加请求
    return p1;
}).catch((err)=>{
    console.log(err);
});

axios

https://unpkg.com/axios/dist/axios.min.js

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

解决回调地狱

当有多个promise对象并且只需要一个时

Promise.all([p1,p2,p3]).then(res=>{
    console.log(res);
})

模块

async和await

async function axian(){
    return "hello";
}
axian().then(v=>{
    console.log(v);
})