2022-02-05 js异步操作

js异步操作

js执行环境是单线程，就是一次只能执行一个任务。所以为了解决这个，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

1 回调函数

就是把函数当作父函数的参数传进去，从而异步执行。

//同步回调

function A(callback){
    console.log("I am A");
    callback();  //调用该函数
}
function B(){
   console.log("I am B");
}
A(B`);

// 异步回调 ajax

var fs=require('fs');
function getMime(callback){
    fs.readFile('mime.json',function(err,data){
        callback(data);
    })
}
getMime(function(result){
    console.log(result.toString());
})

2 promise的理解与应用

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。它最早由社区提出并实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。

promise的用法

function promiseFun (){
  new Promise(function(resolve, reject){
    // ... some code
    
    if (/* 异步操作成功 */) {
        resolve(value);
    } else {
        reject(error);
    }
 })
} 
promiseFun ().then((data)=>{
},(data)={
})
promiseFun ().catch(()=>{
})

3 async await的理解与应用

含义： async 函数是在ES2017 标准中引入的，async使得异步操作变得更加方便，其实他就是Generator 函数的语法糖
基本用法： 应用场景

        const myFun2 = function(val, time) {
            return new Promise((resolve, reject) =>{
                setTimeout(()=>{
                    resolve(val)
                }, time)
            })
        }

        const demo_3 = async function() {
            let a = await myFun2(3, 1000)
            console.log(a)
            let b = await myFun2(4, 2000)
            console.log(b)
            let c =  await myFun2(5, 3000)
            console.log(c)
            let d = a + b +c  
            console.log(d)
        }

        demo_3();
        /**
        * 打印结果：
        3秒后输出：  3
        4秒后输出：  4
        5秒后输出：  5   和 12
        */

说明：

1. await命令只能用在async函数之中，如果用在普通函数，就会报错。
2. async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，如果任何一个await语句后面的 Promise 对象变为reject状态或遇到return，那么整个async函数都会中断执行。