前端笔记 -- 异步 | 青训营笔记

104 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第十二天 \

异步的概念

异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念。

在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。

简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。

以上是关于异步的概念的解释,接下来我们通俗地解释一下异步:异步就是从主线程发射一个子线程来完成任务。

promise

Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务。

构造 Promise

new Promise(function (resolve, reject) {
    // 要做的事情...
});

Promise 的使用

Promise 构造函数只有一个参数,是一个函数,这个函数在构造之后会直接被异步运行,所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。
resolve 和 reject 都是函数,其中调用 resolve 代表一切正常,reject 是出现异常时所调用的

new Promise(function (resolve, reject) 
{ 
    var a = 0; 
    var b = 1; 
    if (b == 0) 
    reject("Divide zero"); 
    else resolve(a / b); 
    }).then(function (value) { 
        console.log("a / b = " + value); 
    }).catch(function (err) { 
        console.log(err); 
    }).finally(function () { 
    console.log("End"); 
    });

结果:

a / b = 0
End

Promise 类有 .then() .catch() 和 .finally() 三个方法,这三个方法的参数都是一个函数,.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列,.catch() 则是设定 Promise 的异常处理序列,.finally() 是在 Promise 执行的最后一定会执行的序列。 .then() 传入的函数会按顺序依次执行,有任何异常都会直接跳到 catch 序列

async/await

async/await的用处就是:用同步方式,执行异步操作

async

async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。

async function helloAsync(){ 
        return "helloAsync"; 
    } 
    console.log(helloAsync()) // Promise {<resolved>: "helloAsync"} 
    helloAsync().then(v=>{ 
    console.log(v); // helloAsync 
    })

await

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用
返回 Promise 对象的处理结果。如果等待的不是 Promise 对象,则返回该值本身。
如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果。

function testAwait (x) { 
    return new Promise(resolve => { 
    setTimeout(() => { 
        resolve(x); }, 2000); 
        }); 
       } 
   async function helloAsync() { 
       var x = await 
       testAwait ("hello world"); 
       console.log(x); 
   } 
   helloAsync (); // hello world

参考

菜鸟教程