promise与ts基础

一、promise、async、await

1.1、promise

/***回调地狱**************************************************************************/
      var img = new Image();
      img.src = "a.jpg";
      img.onload = function () {
        var img1 = new Image();
        img1.src = "b.jpg";
        img1.onload = function () {
          var img2 = new Image();
          img2.src = "c.jpg";
          img2.onload = function () {};
        };
      };
/***变为promise格式*************************************************************/
      function loadImage(src) {
        return new Promise(function (resolve, reject) {
          var a = 1;
          var img = new Image();
          img.src = src;
          img.addEventListener("load", function (e) {
            resolve([a, img]);
          });
        });
      }
		
/*在这里 loadImage("./img/a.jpg").then() 就相当于：
	var p=loadImage("./img/a.jpg");
	p.then()
*/
      loadImage("./img/a.jpg")
        .then(function ([a, img]) {
          console.log(a, img);
          return loadImage("./img/b.jpg");
        })
        .then(function ([a, img]) {
          return loadImage("./img/c.jpg");
        })
        .then(function () {});
        
/***async、await***************************************************************/

//当需要加载许多图片时会产生异步问题 所以运用async await
      function loadImage(src) {
        return new Promise(function (resolve, reject) {
          var img = new Image();
          img.src = src;
          img.onload = function () {
            resolve(img);
          };
        });
      }

      var arr = [];

      var list = [];
      for (var i = 0; i < 5; i++) {
        list.push(loadImage(i + ".jpg"));
      }
      // 所有异步都执行完成以后将所有结果放在数组中返回
      Promise.all(list).then(function (arr) {
        console.log(arr);
      });

      // 第一个完成异步返回结果
      Promise.race(list).then(function (img) {
        console.log(img);
      });

      async function loadAll() {
        var arr = [];
        // 阻塞式同步
        for (var i = 0; i < 4; i++) {
          var img = await loadImage(i + ".jpg");
          arr.push(img);
        }
        return arr;
      }
// async 函数中await可以等待的前提条件有两个
// 1、必须再async函数，当前这个函数必须是async函数
// 2、await后面的等待的内容必须是一个Promise对象

二、TS基础

// var a:number=3;
// var o?:object;
// var o:object | undefined=undefined;
// var arr:Array<number>=[1,2,3];
// var b:Number=5;

// a=new Number(10);
// b=new Number(10);
// b=20;


// class Box{
//     private a:number=10;
//     private b?:number;
//     private c:number|undefined;
//     constructor(){
//         console.log(this.c);
//     }
//     private play(n?:number):number|undefined
//     {
//         return 10;
//     }
// }

// var b=new Box();


// var o:object={a:1,b:2};
// console.log(o.a);

// class Box{
//     public a:number=1;
//     public b:number=2;
// }
// var o=new Box();
// console.log(o.a);
// o.a=10;


// interface IObj{
//     a:number;
//     b:number;
//     // c?:number;
//     [key:string]:number | string | boolean | object;
// }
// var o:IObj={a:10,b:20};
// console.log(o.a);
// o.a=20;
// o.c=30;
// o.name="xietian";
// o.num=10;

// class Box{
//     private a:number=1;
//     protected b:number=2;
//     public c:number=3;
//     constructor(){

//     }
//     private fn1():void
//     {
//         console.log("a")
//     }
//     protected fn2():void{
//         console.log("b")
//     }
//     public fn3():void{
//         console.log("c")
//     }
// }

// class Ball extends Box{
//     constructor(){
//         super();
//     }
//     public fn3():void
//     {
//         // 使用protected 定义的属性和方法，都可以在其子类中调用和覆盖
//         // 使用public定义的属性方法也可以在子类中调用和覆盖
//         // this.fn2();
//     }
//     protected fn2():void{

//     }
//     // 在父类中定义的私有方法，在子类中不可以重复实现，也不可以调用
//     // private fn1():void{

//     // }
// }

// var b:Box=new Box();
// b.c   只有使用public定义的属性和方法才能在实例化后暴露使用

// public  当前类，子类和实例化都可以调用这个属性和方法，也可以覆盖
// protected 当前和子类可以调用这个属性和方法，也可以覆盖，实例化对象不能调用
// private 当前类可以使用这个方法和属性，子类和实例化对象不能调用


// interface IObjs{
//     a:number;
//     b:number;
//     play():void;
// }
// interface IKeys{
//     c:number;
//     d:number;
//     run():void;
// }

// class Box implements IObjs{
//     public a:number=4;
//     public b:number=5;
//     public play():void{

//     }
// }
// class Ball implements IObjs,IKeys{
//     public a:number=4;
//     public b:number=5;
//     public c:number=6;
//     public d:number=7;
//     public play():void{

//     }
//     public run():void
//     {

//     }
// }

// var a:Box=new Box();
// var b:Ball=new Ball();
// var arr:Array<IObjs>=[a,b];


// abstract class Box{
//     abstract a:number;
//     public b:number=10;
//     abstract play():void;
//     protected run():void{
//         console.log("aaa");
//     }
// }

// class Ball extends Box{
//     public a:number=10;
//     public play():void{

//     }
// }

// 抽象类是不能实例化的，只能被继承
// 抽象类是具备接口和类的特征，抽象属性和方法在继承后可以灵活定义
// 非抽象属性和方法可以处理共有的逻辑内容
// var b:Box=new Box();