异步之回调

单线程 : js

同步:会出现阻塞,一个时间只有一个任务执行,需等待返回结果

异步 :不会出现阻塞,一个时间可以执行多个任务,不用等结果返回

多线程:java语言

同步:每一个任务分配一个空间,然后执行,同时多个任务可以划分多个空间,同时执行

任务池

异步多线程任务要先放到任务池,等要执行的代码执行完,等主线程空闲下来,再找任务池中的执行

异步的发展过程

第一阶段:回调代码的表现形式:嵌套 但不易于阅读

const callback = () => {
  let result = [];
  request({
    type: "POST",
    url: "/users/one",
    success(data) {
      console.log(data);
      request({
        type: "POST",
        url: "/users/two",
        success(data) {
          console.log(data);
          request({
            type: "POST",
            url: "/users/three",
            success(data) {
              console.log(data);
            }
          });
        }
      });
    }
  });
};

第二阶段: Promise,通过Promise将异步函数封装

第一个参数:resolve 异步成功之后执行的函数

第二个参数:reject 是当有异常的时候执行的函数

通过.then( )方法调用

注:Promise是一个构造函数

const _promise = () => {
  new Promise((resolve, reject) => {
    request({
      type: "POST",
      url: "/users/one",
      success(data) {
        resolve(data);
      }
    });
  })
    .then(data => {
      console.log(data);
      return new Promise((resolve, reject) => {
        request({
          type: "POST",
          url: "/users/two",
          success(data) {
            resolve(data);
          }
        });
      });
    })
    .then(data => {
      console.log(data);
      return new Promise((resolve, reject) => {
        request({
          type: "POST",
          url: "/users/three",
          success(data) {
            resolve(data);
          }
        });
      });
    })
    .then(console.log);
};

第三阶段: generator 函数,专门用来处理异步

1、声明generator函数时,function要加 *号(function) ,并配合yield使用

2、next()会把yield后面的值返回出去,value

3、next的参数是可以传递到gen函数的内部

关键字:yield的返回值

done:ture/false状态

value:它的值是yield的值

• 注:当我们的调用次数超过yield声明的次数时,多余的调用返回值时undefined,也就是iterator迭代器被销费掉了.

iterator 迭代器

当我们直接调用generatort函数时,generatort执行的并不是他内部的代码,而是返回一个对象,我们通过返回的对象里的next方法调用generatort函数

function* gen(){
    const data1 = yield new Promise ((resolve,reject)=>{
        request({
            type:"POST",
            url:"/users/one",
            success:resolve,
        });
    });
    console.log(data1);
    const data2 = yield new Promise ((resolve,reject)=>{
        request({
            type:"POST",
            url:"/users/two",
            success:resolve,
        });
    });
    console.log(data2);
    const data3 = yield new Promise ((resolve,reject)=>{
        request({
            type:"POST",
            url:"/users/shan",
            success:resolve,
        });
    });
    console.log(data3);
}

function run(gen){//辅助函数
    const it = gen();//it就是iterator迭代器
    function next(data){
        const {value,done}=it.next(data)
        if(done)return;
        value.then(data=>next(data));   
    }
    next();

第四阶段 async/await

async function _async(){
    const data1 = await new Promise ((resolve,reject)=>{
        request({
            type:"POST",
            url:"/users/one",
            success:resolve,
        });
    });
    console.log(data1);
    const data2 = await new Promise ((resolve,reject)=>{
        request({
            type:"POST",
            url:"/users/two",
            success:resolve,
        });
    });
    console.log(data2);
    const data3 = await new Promise ((resolve,reject)=>{
        request({
            type:"POST",
            url:"/users/shan",
            success:resolve,
        });
    });
    console.log(data3);
}