promise与异步
Promise是异步编程的一种解决方案
回调可以称异步。
注意:Array上的那些函数,虽然需要回调函数,但它不是异步。所以这些不用Promise处理。
1、同步
(1)使用alert介绍同步阻塞(2)使用函数计算两个数的和调用后用变量接收
2、异步
常见的应用场景:(1)网络请求(2)读取文件(3)js中的事件函数就是非常典型的异步表现形式。
异步的特点:①都有一个延迟时间
②不影响其他代码运行
同步和异步的区别:
同步:没有回调,函数调用直接用等号赋值,如果程序很忙不会往下执行的(阻塞)
异步:不阻塞的,如果有结果,是用回调函数接收的。而且node中的所有的异步方法都封装好了。回调函数的第1个参数永远是错误error参数,第2个参数是结果。
3、回调函数
简介
在使用JavaScript时,为了实现某些逻辑经常会写出层层嵌套的回调函数,如果嵌套过多,会极大影响代码可读性和逻辑,这种情况被称为回调地狱(或回调)。而往往一些异步操作需要使用回调函数拿到结果
4、promise简介
Promise(许诺) 是异步编程的一种解决方案,就是一个容器,里面保存着某个未来才会结束的事件。
- es6里面提供的语法
- 本质上是一个构造函数
- 功能上是个容器(用来存放未来要做的事)
特点:能够解决异步回调,但拿到结果还是有回调。最终用的就是promise + async函数
5、语法
基本语法:
new Promise( (resolve,reject)=>{ // resolve() // reject() } )
6、promise状态
pending: 进行时的状态 pending=> 成功的:success/resolve/fulfilled pending=> 失败的: error/rejected
7、promise对象方法
then
语法:
promise对象.then( (结果)=>{ //代码块 } ,(e失败的信息)=>{ })
catch:了解
语法:
promise对象.catch( (异常)=>{ //代码块 } )
async函数
作用:async也是处理异步的,它是对Promise的一种扩展,让异步更加方便,彻底解决回调嵌套
1、 async函数基本用法
注意:async函数返回的也是一个promise对象
语法:
// 一般写法
async function name( ){
let res1 = await promise异步1
let res2 = await promise异步2
...
}
// 箭头函数写法
async ()=>{
let res1 = await promise异步1
let res2 = await promise异步2
...
}
// 在对象里面的写法
{
async fn(){
let res1 = await promise异步1
let res2 = await promise异步2
...
}
}
// 点击函数写法
bnt.onclick = async ()=>{
let res1 = await promise异步1
let res2 = await promise异步2
...
}
2、应用
使用async函数把promise的异步变成真正的同步代码
代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01async函数的语法</title>
</head>
<body>
<script>
// async 里面应该有异步,而这个异步一定是用promise封装过的
// promise对象 前面应该加 await关键字 ,await 只能写在async内部
let pro1 = new Promise( (resolve)=>{
setTimeout(()=>{
resolve(200) //200就是成功的结果
},2000)
} )
let pro2 = new Promise( (resolve)=>{
setTimeout(()=>{
resolve(300) //200就是成功的结果
},1000)
} )
async function fn1(){
//console.log(1)
let res1 = await pro1
let res2 = await pro2
console.log(res1,res2) //200 300
// console.log(res2) //
}
fn1()
//console.log(2)
</script>
</body>
</html>