总结 |异步/非阻塞的处理方式

一 单线程

JavaScript是单线程的，即在同一段时间内，只能处理一个任务。

1. 接收请求（request）
2. 开出线程（thread）处理，用户等待
3. 请求处理完成，线程（thread）释放

有些任务需要消耗时间（比如:上传,读取文件,下载等），如果按照以上方法（同步），会损耗大量时间。

二 什么是异步

浏览器是多线程的。js单线程中的这些需要耗费时间的任务，可以让浏览器新开线程来单独处理。此时浏览器的主线程会继续往下走，当其他线程做完事之后，会再将其推到主线程当中进行执行。

异步请求指不需要等待web服务器对请求作出响应。即代码遇到异步任务时，会继续做主线程的任务，并会在服务器处理完异步请求时通知你。

参考：https://blog.csdn.net/wzc_coder/article/details/103982658

三 非阻塞处理

阻塞处理：后边的语句无法执行，除非前面的执行完毕

function updb1(){
    let start =new Date().getTime()
    while (new Date().getTime()<start+3000);
}
updb1()
console.log('数据库更新成功！')
console.log('其他语句')

非阻塞处理：继续执行后面的。

function updb2(done){
    setTimeOut(()=>{
        done()
    },3000)
}
updb2(function(){
    console.log('数据库更新成功！')
})
console.log('其他语句')

四 异步/非阻塞的处理方式

在下面例子中，name无法打印出来，因为getName遇到花括号直接结束了 没有经过定时器。

function getName(){
    setTimeout(()=>{
        let name='jack'
        return name
    },1000)
}
console.log(getName())

4.1 回调函数

function getName(callback){
    setTimeout(()=>{
        let name='jack'
        callback(name)
    },1000)
}
//外部获取异步方法内的数据
getName(function(value){
    console.log(value)
})

4.2 Promise

let p=new Promise(function(resolve,reject){
    setTimeout(function(){
        let name='张三';
        resolve(name);
    },1000);
})

p.then(function(data){
    console.log(data);
})

另一种写法：

function getName(resolve,reject){
    setTimeout(function(){
        var name='张三';
        resolve(name);
    },1000)
}
var p=new Promise(getName)
p.then(function(data){
    console.log(data);
})

4.3 async&await

async function getName(){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
            let name='张三';
            resolve(name)
        },1000)
    })
    
}
async function print(){
    let data=await getName()
    console.log(data)
}
print()

• async让方法变成异步
• 为了处理异步，就必须返回promise
• await等待异步方法执行完成
• await必须写在async方法里边