js callback promise async await 几种异步函数处理方式

Posted 2020-10-14

***callback 

这个是最常用的也是最简单的 ,比如在ajax网络请求中,返回请求完成返回的数据

回调函数就是把一个函数当成另一个函数的参数,可以传递函数内的局部变量,也可以异步完成一些操作,在函数的实现里调用回调函数,在函数的调用里实现回调函数

// 回調函數的方式 閉包 可以獲取函數內部的局部變量

function testCallback(callback) {

　　let a = 1;

　　let b = 2;

　　if (a < b) {

　　　　callback && callback(a);

　　}

}

// 调用

testCallback((res) => {

　　console.log(res, ‘this is callback‘)

});

 

***promise

ES6 的一种解决异步函数的方法

promise就是一个对象,用来传递异步操作的消息,他代表了某个未来才会知道结果的是事件(通常是一个异步操作),有三种状态,未完成,resolve,rejec,

promise的构造函数接受一个函数作为参数,该函数的两个参数分别又是两个方法 resolve() 和 reject() 

function testPromise() {

　　return new Promise((resolve, reject) => {

　　　　let a = 2

　　　　let b = 1

　　　　if (a > b) {

　　　　　　resolve(a)

　　　　} else {

　　　　　　reject(b)

　　　　}

　　})

}

function testPromise1() {

　　return new Promise((resolve, reject) => {

　　　　let a = 10

　　　　let b = 5

　　　　if (a > b) {

　　　　　　resolve(a)

　　　　} else {

　　　　　　reject(b)

　　　　}

　　})

}

//  那么接下来就可以链式调用了 1执行完执行2

// 用promise來順序執行多個異步函數

testPromise().then((resolve) => {

　　console.log(resolve)

　　return testPromise1();

}).then((res) => {

　　console.log(res, ‘this is promise‘);

}).catch((err) => {

　　console.log(err);

})

 

 // 并发执行 异步函数  所有函数执行完再返回结果

let promise = testPromise();

let promise1 = testPromise1();

Promise.all([promise, promise1]).then((res) => {

　　console.log(res, ‘this is promiseAll‘);

})

 

// 竞速执行 res返回第一个执行完成的异步函数

Promise.race([promise, promise1]).then((res) => {

　　console.log(res, ‘this is promiseRace‘);

})

 

*** async await 是ES7的一个标准 为了解决多个promise的嵌套,让异步函数看起来像同步函数一样清晰,配合promise使用

注意 只有在async 函数里才可以使用await

// 用async await 來順序執行多個異步函數

async function testAsync() {

　　try {

　　　　let a = await testPromise();

　　　　let b = await testPromise1();

　　　　console.log(a, b, ‘this is async‘);

　　} catch (err) {

　　　　console.log(err)

　　}

}

testAsync();

awiat 后面等待的是一个promise函数,它会等到promise函数返回对应的状态再执行后面的代码