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>