晓舟报告学习笔记——JS基础-异步编程

异步编程

一、同步与异步

异步： 可以多条任务线去执行程序，一条任务卡顿不影响其他任务。

一般的return返回只能实现同步

  <script>
        //ajax 与服务器通信，异步获取数据
        //异步获取数据的方法


        let target = "hello world";
        //获取数据的方法
        function getData(){
            setTimeout(() => {
                return target;          //return 只能返回同步的数据
            }, 2000);
        }

        //我们只能通过getData来获取数据（target)
        let result = getData();
        console.log(result);    //输出：undefined 因为return 只能返回即时的数据，不能实现异步返回
    </script>

复习回调函数

回调函数：将函数作为一个参数传递给另外一个函数

 //回调函数

  function fun(fn){

​    return fn();  // 也可为直接的fn(); 表示返回值是一个函数类型

  }



  fun(()=>{

​    console.log("我是回调函数。");

  })

二 实现异步的方法

1 用回调函数版的getData获取数据

 //1 回调函数获取数据

​    function getData(fn){

​      setTimeout(() => {

​        fn(target)

​      }, 1000);

​    }



​    //通过getData获取数据

​    console.log(getData);

​    getData((d)=>{

​      console.log(d); // 相当于此时的输出就是形参，二结合getData可知，形参就是target

​      //输出 hello world 

​    })

2 promise

在ES2015中新加入了Promise对象，Promise对象用来解决异步问题.

 //2 promise

​    let p = new Promise((resolve)=>{

​      setTimeout(() => {

​        resolve(target);

​      }, 1000);

​    })

​    p.then((d)=>{

​      console.log(d); //输出：hello world

​    })

3 promise版的getData

  function getData(){

​      return new Promise((resolve)=>{

​        setTimeout(() => {

​          resolve(target);

​        }, 1000);

​      })

​    }

​    let p =getData();

​    p.then((data)=>{

​      console.log(data); // 此时取出形参 输出;hello world

​    })

一般第三方的库会有函数获取异步的数据。

4、async函数

async函数与Promise对象的用法。

 function getData(){

​      return new Promise((resolve)=>{

​        setTimeout(() => {

​          resolve(target);

​        }, 1000);

​      })

​    }

​    // let p =getData();

​    // p.then((data)=>{

​    //   console.log(data); // 此时取出形参 输出;hello world

​    // })



​    //async 函数解决异步问题

​    async function fun(){

​      let data = await getData(); 

​      //和promise配套使用，此时不需要重新赋值let p =getData(); 然后再then

​      //此时的await实现了对应的功能

​      console.log(data);

​    }

​    fun();

await有等待的过程

async function fun(){

​       //和promise配套使用，此时不需要重新赋值let p =getData(); 然后再then

​      //此时的await实现了对应的功能

​      let data = await getData(); 

​      console.log(data);

​      let data1 = await getData(); 

​      console.log(data1);

​      let data2 = await getData(); 

​      console.log(data2);

​      // 可以看到延迟之后，输出对应的值 

​      //await的作用

​    }

至此，晓舟报告JS基础学习完毕，完结撒花，继续下异步学习。
共勉