回调函数 promise async/await全分析

最新推荐文章于 2023-11-01 11:55:44 发布
最新推荐文章于 2023-11-01 11:55:44 发布
阅读量631 收藏 1
点赞数
分类专栏： 学习 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43055079/article/details/108103846
版权

回调函数

获取异步操作的结果

在这里插入图片描述

不成立情况

	function add(x,y) {
		console.log(1)
		setTimeout(() => {
			console.log(2)
			var ret = x + y
			return ret
		}, 1000);
		console.log(3)
		//到这里执行结束 不会等待定时器 
	}

	console.log(add(10,20))

结果

1
3
undfine
2

回调函数

	function add(x,y,callback) {
		//callback就是回调函数
        //var callback = function(ret){console.log(ret)}
		console.log(1)
		setTimeout(() => {
			console.log(2)
			var ret = x + y
			callback(ret)
		}, 1000);
	}

	add(10,20,function (ret) {
		console.log(ret)
	})

Promise

无法决定输出顺序 （异步）

回调地狱：

在这里插入图片描述

异步代码：无法决定输出顺序

eg：

在这里插入图片描述

输出结果：

在这里插入图片描述

决定输出顺序

回调地狱

套娃

const fs = require('fs')

fs.readFile('./data/a.txt','utf8',function (err,data) {
    if(err){
        // return console.log('err')
        // 抛出异常
        //  1.阻止程序执行
        //  2.把错误消息打印打控制台
        throw err
    }
    console.log(data)
    fs.readFile('./data/b.txt','utf8',function (err,data) {
        if(err){
            // return console.log('err')
            // 抛出异常
            //  1.阻止程序执行
            //  2.把错误消息打印打控制台
            throw err
        }
        console.log(data)
        
        fs.readFile('./data/c.txt','utf8',function (err,data) {
            if(err){
                // return console.log('err')
                // 抛出异常
                //  1.阻止程序执行
                //  2.把错误消息打印打控制台
                throw err
            }
            console.log(data)
        })
    })
})

结果 顺序正确

在这里插入图片描述

Promise解决回调地狱

理解

在这里插入图片描述

小例子
var fs = require('fs')

//ES6 promise

//1 创建一个Promise 容器
console.log(1)
new Promise(function () {
    console.log(2)
    fs.readFile('./data/a.txt','utf8',function (err,data) {
        if(err){
            //失败了

        }else{
            //成功了
            console.log(3)
        }
    })
})
console.log(4)
//输出结果
1 2 4 3
先1 到promise 2
再4 最后promise结束 3
正式使用

基本语法

var p1 = new Promise(function (resolve,reject) {
    fs.readFile('./data/a.txt','utf8',function (err,data) {
        if(err){
            //失败了
            reject(err)
        }else{
            //成功了
            resolve(data)
        }
    })
})

//then 中的data 就是 resolve(data)的data 
//catch 中的err 就是 reject(err)err 
p1.then((data)=>{
    console.log(data)
}).catch((err)=>{
    console.log('失败',err)
})
实现效果
var fs = require('fs')

//ES6 promise

//1 创建一个Promise 容器
var p1 = new Promise(function (resolve,reject) {

    fs.readFile('./data/a.txt','utf8',function (err,data) {
        if(err){
            //失败了
            reject(err)
        }else{
            //成功了
            resolve(data)
        }
    })
})

var p2 = new Promise(function (resolve,reject) {

    fs.readFile('./data/b.txt','utf8',function (err,data) {
        if(err){
            //失败了
            reject(err)
        }else{
            //成功了
            resolve(data)
        }
    })
})

var p3 = new Promise(function (resolve,reject) {

    fs.readFile('./data/c.txt','utf8',function (err,data) {
        if(err){
            //失败了
            reject(err)
        }else{
            //成功了
            resolve(data)
        }
    })
})

//then 中的data 就是 resolve(data)的data 
//catch 中的err 就是 reject(err)err 
p1.then((data)=>{
    console.log(data,'p1')
    //当 p1 读取成功的时候
    //当前函数中return 的结果就可以在后面的then 中 function 接收到
    //当你 return 123 后面就能接收到 123
    //  return 'hello' 后面就接收到 'hello'
    //  没有 return 后面收到的就是 undefined
    //上面那些return的数据没什么用
    //真正有用的是：我们可以 return 一个 Promise
    //当return 一个 Promise 对象的时候，后续的then中的方法 的第一个参赛会作为 p2的 resolve
    return p2
}).catch((err)=>{
    console.log('失败',err)
})
.then((data)=>{
    console.log(data,'p2')
    return p3
})
.then((data)=>{
    console.log(data,'p3')
})

在这里插入图片描述

在这里插入图片描述

封装promise API

封装

function pReadFile(filrPath) {
    return new Promise(function (resolve,reject) {

        fs.readFile(filrPath,'utf8',function (err,data) {
            if(err){
                //失败了
                reject(err)
            }else{
                //成功了
                resolve(data)
            }
        })
    })
}

使用

pReadFile('./data/a.txt')
    .then((data)=>{
        console.log(data,'p1')
        return pReadFile('./data/b.txt')
    })
    .then((data)=>{
        console.log(data,'p2')
        return pReadFile('./data/c.txt')
    })
    .then((data)=>{
        console.log(data,'p3')
    })

结果

在这里插入图片描述

Promise使用场景

应用场景

get('data.json',function (data1) {
    console.log(data)
    get('data22.json',function (data2) {
        console.log(data2)
    })
})

Promise

var data = {}

return new Promise(()=>{
    get('data.json')
})
    .then((data1)=>{
    data.user = data1
    return new Promise(()=>{
        get('data22.json')
    })
})
    .then((data2)=>{
    data.jobs = data2
})

axios 使用Promise场景

先封装

export default {
    
    fetchData (url, methods, datas) {
        return new Promise((resolve, reject) => {
          axios({
              url: url,
              method: methods,
              data: datas
            }).then((res) => {
              resolve(res)
            }).catch(function (error) {
              reject(error)
              // console.log(error);
            })
        })
    }
}

module.exports = api

使用

getData () {
    api.fetchData('https://www.apiopen.top/novelApi','get')
        .then(res=>{
            console.log(res.data,'111');
            return api.fetchData('https://www.apiopen.top/novelApi','get')
        },error => {
            console.log(error)
        })
        .then(res=>{
            console.log(res.data,'222');
            return api.fetchData('https://www.apiopen.top/novelApi','get')
        },error => {
            console.log(error)
        })
    	
}

async和await

async

async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。

使用：

async function timeout() {
　　return 'hello world';
}

console.log(timeout());

输出结果：调用会返回一个promise 对象。

在这里插入图片描述

通过.then输出结果

在这里插入图片描述

异步函数：

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('虽然在后面，但是我先执行');

结果：

在这里插入图片描述

await (等待)

await 关键字只能放到async 函数里面

现在写一个函数，让它返回promise 对象，该函数的作用是2s 之后让数值乘以2

// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}

testResult();

2秒后输出：

在这里插入图片描述

等待promise执行后输出

示例二

function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}

async function testResult() {
    let first = await doubleAfter2seconds(30);
    let second = await doubleAfter2seconds(50);
    let third = await doubleAfter2seconds(30);
    console.log(first + second + third);
}

testResult();

6秒后输出：

在这里插入图片描述

async和await的应用场景

假设我们有如下两个方法

  function convertToBase64Data(url) { // 转成base64格式
    return new Promise( resolve => {
      setTimeout( () => {
        resolve('img');
      }, 1000);
    });
  }
  function saveToLocal(img) { // 保存到本地
    return new Promise( resolve=> {
      setTimeout( () => {
        resolve('success');
      }, 200);
    });
  }

场景1：

多个异步需要按顺序：图片处理完成然后保存在本地

promise版

    function fn1() {
        return convertToBase64Data('http://1.jpg').then( base64Data => {
            return saveToLocal(base64Data);
        })
    }

async await版：

  async function fn1() {
    const base64Data = await download('http://1.jpg');
    const result = await saveToLocal(base64Data); 
    return result;
  }

场景2：

图片需要同时处理，但是要按顺序一张一张保存在本地

async function fn2() {
        // 同时处理两张
        const promise1 = convertToBase64Data('http://1.jpg');
        const promise2 = convertToBase64Data('http://2.jpg');
        const [data1, data2] = await Promise.all([promise1, promise2]);
        // 先保存第一张
        const result = await saveToLocal(data1);
        // 再保存第二张
        const result2 = await saveToLocal(data2);
    }

场景3：

多张图片，处理一张保存一张，然后才能处理下一张

async function fn3() {
        const imgUrls = ['http://1.jpg', 'http://2.jpg', 'http://3.jpg', 'http://4.jpg', 'http://5.jpg'];
        for (let i = 0; i < imgUrls.length; i++) {
          const base64Data = await convertToBase64Data(imgUrls[i]);
          const result = await saveToLocal(base64Data);
          console.log(result);
        }
    }

场景4：

条件语句

async function fn4(needConvertToBase64) {
    const img = await download('http://1.jpg');
    if (needConvertToBase64) {
      const base64Data = await convertToBase64(img);
      return base64Data;
    }
    return img;
  }

场景5：

你可能会这样：调用方法1，使用方法1返回的结果去调用方法2，然后使用两者的结果去调用方法3。

假设有如下业务: 获取用户ID，然后根据ID获取用户信息，然后将两者保存在服务器。

function getUserId() {
    return Promise.resolve('123123');
  }
  function getUserInfo(id) {
    return Promise.resolve({name: 'aaron'});
  }
  function saveToServer(id, userInfo) {
    return Promise.resolve('success');
  }

你的代码很可能是这样的:

 function fn5() {
    return getUserId().then( id => { // 拿到id
      return getUserInfo(id).then( userInfo => {
        return saveToServer(id, userInfo);
      });
    });
  }

使用await:

 async function fn5() {// 使用await
    const id = await getUserId();
    const userInfo = await getUserInfo(id);
    return saveToServer(id, userInfo);
  }

场景6：

错误处理

使用await，try/catch捕获错误

async function fn6() {
    try {
      const data = await convertToBase64('http://1.jpg');
      const result = await saveToLocal(data);
      console.log(result);
    } catch (err) {
      console.log(err);
    }
  }

=> { // 拿到id
return getUserInfo(id).then( userInfo => {
return saveToServer(id, userInfo);
});
});
}


使用await:

```js
 async function fn5() {// 使用await
    const id = await getUserId();
    const userInfo = await getUserInfo(id);
    return saveToServer(id, userInfo);
  }

场景6：

错误处理

使用await，try/catch捕获错误

async function fn6() {
    try {
      const data = await convertToBase64('http://1.jpg');
      const result = await saveToLocal(data);
      console.log(result);
    } catch (err) {
      console.log(err);
    }
  }
啦咯啦咯啦啦咯
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
异步编程：回调函数(Callback)、Promise 对象和 async/await
ASerendipity_的博客
03-11 348
async/await 是 ECMAScript 2017 中引入的异步编程新特性，它基于 Promise 对象，提供了更简洁的语法来处理异步操作。async 函数返回一个 Promise 对象，await 关键字用于等待一个 Promise 对象的解决（resolve）。Promise 是 JavaScript 的异步编程解决方案之一，它表示一个异步操作的最终完成或失败的结果。回调函数是异步编程的最基本方式，它通过将一个函数作为参数传递给另一个函数，在异步操作完成后调用该函数来处理结果。
javascript之异步操作理解---回调函数，async，await以及promise对象
qq_44774831的博客
06-10 3745
javascript之异步操作理解---回调函数，async，await以及promise对象概述 概述 写在前面：虽然平时做项目，但是发现自己写的代码还是很烂。最近接触了一个对性能要求比较高的项目，于是重新开始审视自己写的代码是不是达到尽量较小系统性能了。加上前几天学到express框架了解到了回调函数的操作。作为拓展，查了许多资料，再次总结一下javascript的异步操作。 javascript是一门单线程语言,即一次只能完成一个任务,若有多个任务要执行,则必须排队按照队列来执行(前一个任务完成,
解决回调地狱的async/await函数的详细介绍
m0_63068277的博客
11-01 77
解决回调地狱的async/await函数的详细介绍
js中callback，回调地狱，Promise和async,await的浅解
周五星的博客
04-24 912
什么是callback？什么是回调地狱？怎么解决回调地狱？ES6中Promise的理解？async和await的理解？ 一、 callback 回调只是使用JavaScript函数的惯例的名称。 JavaScript语言中没有特别的东西叫做“回调”，它只是一个约定。 不像大多数函数那样立即返回一些结果，使用回调函数需要一些时间来产生结果。 “异步”这个词，又名“异步”，意思是“需要一些时间”或“...
回调函数 promise async和await
qq_46675545的博客
06-08 867
同步和异步？ JavaScript是一门单线程语言，理论上来说是按照语句出现的顺序执行，如果前面一个任务要花费很长的时间，那么后面的任务zong'bu'n
async / await 解决回调地狱
01-08
 本文主要是对async / await 的介绍及解决回调地狱的方法，关于Promise的详细介绍及Promise解决回调地狱，见：  [ ES6之Promise的介绍及解决回调地狱 ] async / await的介绍： async写在函数的前面，就可以该函数...
由回调函数、Promise到async/await的同步写法执行异步代码
01-08
由回调函数、Promise到async/await的同步写法执行异步代码 同步异步是前端面试中经常遇到的问题，虽然不难，但是搞清楚两者之间的关系和转换还是很重要 同步 同步是一种线性执行的方式，执行的流程不能跨越，其后的...
Async/Await替代Promise的6个理由
01-01
async/await 是写异步代码的新方式，以前的方法有回调函数和Promise。 async/await 是基于 Promise 实现的，它不能用于普通的回调函数。 async/await 与 Promise 一样，是非阻塞的。 async/await 使得异步代码看...
深入理解ES7的async/await的用法
08-29
它可以将异步代码写得更加优雅，减少回调函数的使用。 4. async/await的语法 async/await的语法非常简单，使用async关键字定义一个异步函数，然后使用await关键字等待Promise的解决。 5. 使用async/await的示例 ...
详解如何让Express支持async/await
08-29
然而，早先版本的Express并不直接支持async/await语法，这在处理异步操作时增加了回调地狱的风险。随着Node.js v8及更高版本引入了对async/await的原生支持，开发者开始寻找方法使Express也能够利用这一特性。本文将...
Promise - async await的基本用法以及使用陷阱，高效使用技巧
伏城之外的博客
12-07 3835
基本用法 async关键字用于修饰一个函数，被修饰的函数会变为异步函数 这里的异步函数，并不是指async函数执行是异步的，而是指async函数会返回一个promise对象 async函数返回的promise对象的状态和结果取决于async函数的return值或抛出的异常 若return值为非promise对象，则async函数返回一个成功态的promise对象，其结果为return值 若return值为promise对象，则async函数返回一个新的promise对象，其状态和..
【JS】回调函数、回调地狱、Promise基本概念、async/await关键字
weixin_44707049的博客
10-21 320
回调函数 回调函数就是一个被作为参数传递的函数。 说的通俗点就是，当一个函数A作为参数，被传入另一个函数B中，并且它不会立刻执行，而是只有当满足一定条件后函数A才可以执行，那么像A这种函数就称为回调函数。 像定时器和ajax中就存在有回调函数。 //定义一个函数 var A = function (){ console.log('我是回调函数A'); } //把函数当作参数传递进另一个函数 setTimeout(A,3000); 同步任务和异步任务 同步任务 如下面的代码： console.log
异步处理方法回调函数、Promise、async
qq_39241544的博客
03-11 559
在开发过程中经常会遇到一些异步操作，比如ajax请求，node读取写入文件，定时任务等等。通常情况下需要捕获异步返回的数据，从而进行下一步操作，下面介绍一下几种处理异步执行的方法 CallBack回调事件 callback，事件回调，异步处理完成，通过事件的调用，从而达到异步处理要求。经典的有ajax请求，node文件操作等，下面看一下node非阻塞代码实例： var fs = require("...
理解异步函数async和await的用法
热门推荐
铁锤妹妹的博客
03-23 7万+
async作为一个关键字放在函数前面，表示该函数是一个异步函数，异步函数意味着该函数的执行不会阻塞后面代码的执行；而 await 用于等待一个异步方法执行完成
promise、async、await解析
sinat_20894673的博客
03-21 395
对于js来说，由于本身就是单线程，在执行耗时操作的时候，比如网络请求等。如果使用同步的话，那么会阻塞整个线程，这样的其实是不合理的。在node中提出了一个很重要的特性，非阻塞式 I/O 的模型、而实现这种模型的基础就是基于事件回调机制。 普通的回调模型 如果使用普通的方式进行回调监听的话，有时候在回调函数中又有回调函数，这样的话会造成回调地狱，对于后期代码的阅读和维护增加很大的难度。 XMLHtt...
Promise原理 async+await应用（异步回调解决方案）
weixin_33850015的博客
10-08 529
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....
async/await函数
ydeway的博客
09-13 1781
基本概念   将async和await看作命令   async/await就是generator函数的语法糖，但对generator函数有部分改进： generator函数执行时返回的是一个Iterator对象，而async/await立即返回一个Promise对象，相当于能够将函数内部的多个异步操作封装成为一个Promise对象。 async/await内部自带执行器，也就是调用后会自动执行，...
koa2+mysql+vue实现用户注册、登录、token验证
weixin_30294021的博客
03-10 481
说明： 　　node.js提供接口，vue展现页面，前后端分离，出于编辑器功能和编辑习惯，vue用HbuilderX，node.js用VScode。（PS：仅作为学习笔记，如有不当之处欢迎指出，在此先谢为敬~~~） 环境： 　　首先需要有node.js环境，安装教程在这里，最好下载较新的版本，对es6、es7有更好的支持，再装个淘宝镜像，完毕！ 后台： 1、安装mysql ...
回调函数 async函数本质
Luckyzhoufangbing的博客
09-10 276
1. 自己实现一个回调函数 function add (x, y ,callback) { setTimeout(() => { var sum = x + y callback(sum) }, 2000) } add(1, 2, (result) => { console.log(result) }) 2s 后控制台输出3 2. async 函数执行结果 本质是一个 Promise async function sum () {} console.l
settimeout promise async/await 区别
最新发布
04-03
setTimeout、Promise和async/await是JavaScript中处理异步操作的三种方式，它们之间有以下区别： 1. setTimeout是一个用于延迟执行的函数，它接受一个回调函数和延迟时间作为参数。当延迟时间到达后，回调函数会被执行。setTimeout并不会阻塞后续代码的执行，而是将回调函数放入任务队列中，在主线程空闲时执行。 2. Promise是一种用于处理异步操作的对象。它可以表示一个异步操作的最终完成或失败，并返回相应的结果或错误信息。Promise有三种状态：pending（进行中）、fulfilled（已完成）和rejected（已失败）。通过调用resolve函数将Promise从pending状态转为fulfilled状态，调用reject函数将Promise从pending状态转为rejected状态。可以通过then方法来处理Promise的结果。 3. async/await是ES8引入的一种处理异步操作的语法糖。async函数用于定义一个返回Promise对象的异步函数，await用于等待一个Promise对象的解析结果。使用async/await可以使异步代码看起来像同步代码，提高代码的可读性和可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值