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

***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函数返回对应的状态再执行后面的代码

时间: 2024-10-10 21:56:14

js callback promise async await 几种异步函数处理方式的相关文章

【转】用 async/await 来处理异步

原文地址:https://www.cnblogs.com/SamWeb/p/8417940.html 昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,也是需要学习一下了. 先说一下async的用法,它作为一个关键字放到函数前面, async function timeout() { return 'hello world';} 只有一个作用, 它的调用会返回一个promise 对象.调用一下看看就知道

promise/async/await

promise和async/await都是异步方案,promise是es6的新特性,而async/await是es7新出的特性.而对于async/await来说是基于promise的,他可以让我们更加优雅的写出代码,而替代then()的写法,例如: const f = () => { return new Promise((resolve, reject) => { setTimeout(() => { reject(234); }, 2000); }); }; const testAs

用 async/await 来处理异步

用 async/await 来处理异步 async:作为一个关键字放到函数前面,用于表示函数是一个异步函数,异步函数也就意味着该函数的执行不会阻塞后面代码的执行.async函数返回的是一个promise对象,如果要获取到promise的返回值,我们应该用then方法. await:关键字,await是等待的意思,它后面可以放任何表达式,不过我们更多的是放一个返回promise 对象的表达式.注意await 关键字只能放到async 函数里面. 原文地址:https://www.cnblogs.c

[C#] .NET4.0中使用4.5中的 async/await 功能实现异步

在.NET Framework 4.5中添加了新的异步操作库,但是在.NET Framework 4.0中却无法使用.这时不免面临着抉择,到底是升级整个解决方案还是不使用呢? 如果你的软件还没发布出去,建议直接使用.NET Framework 4.5吧:但是如果已经发布了,又不想用户重新升级框架到.NET Framework 4.5,那也有一个办法,那就是使用库:Microsoft.Bcl.Async 在4.5中使用async/await 的地方如下: 好处呢,我不多说,我想说的是: What

Javascript学习笔记:3种定义函数的方式

①使用函数声明语法定义函数 1 function sum(num1,num2){ 2 return num1+num2; 3 } ②使用函数表达式定义函数 1 var sum=function(num1,num2){ 2 return num1+num2; 3 } ③使用Function构造函数定义函数 1 var sum=new Function('num1','num2','return num1+num2'); 三种定义函数的方式,其中第二和第三种从技术角度讲都属于函数表达式的方式,但是不

javascript两种声明函数的方式的一次深入解析

声明函数的方式 javascript有两种声明函数的方式,一个是函数表达式定义函数,也就是我们说的匿名函数方式,一个是函数语句定义函数,下面看代码: /*方式一*/ var FUNCTION_NAME = function() { /* FUNCTION_BODY */}; /*方式二*/ function FUNCTION_NAME () { /* FUNCTION_BODY */}; 区别一 方式一的声明方式是先声明后使用 方式二的声明方式可以先调用,后声明 /*方式一: *先声明后使用 *

Promise原理讲解 async+await应用(异步回调解决方案)

1.异步编程 1.1.回调函数 1.2 发布订阅 1.3 观察者模式 1.4 Promise 2.promise用法与原理 2.1 Promise.prototype.then() 2.2 Promise.prototype.catch() 2.3 Promise.all 2.4 Promise.race 2.5 Promise.resolve 2.6 Promise.reject 2.7 promise的一些扩展库 2.8 应用 async + await = generator + co 3

C# 委托异步 和 async /await 两种实现的异步

最近频繁使用异步所以自己综合的学习了一把异步相关的知识,自己稍加整理了一下(这也是我试着写的第一篇,如果有不对的,希望大神来指正!) 首先是 委托实现的异步 class Program { public delegate int weituo();//定义了个委托 public int xxx() { Thread.Sleep(3000); Console.WriteLine("11111."); return 1; } ///定义了个方法 static void Main(strin

JS学习- ES6 async await使用

async 函数是什么?一句话,它就是 Generator 函数的语法糖. 使用场景常常会遇到,请求完一个接口,拿完值再去请求另外一个接口,我们之前回调callback函数处理,如果很多的情况下,看起来很冗余,这时我们可以用async函数. 比如我们有两个请求,如下,这里用的axios: function getCode(){ return axios.get('json/code.json'); } function getlist(params){ return axios.get('jso