es5面向?qū)ο?/p>

function User(name,pass){
    this.name=name;
    this.pass=pass;
}

//給這個(gè)類加原型方法
/**
 * [showName 獲取用戶名]
 * @return {[type]} [返回用戶名]
 */
User.prototype.showName=function(){
    console.log(this.name);
    return this.name;
};

/**
 * [showPass 獲取用戶密碼]
 * @return {[type]} [返回用戶密碼]
 */
User.prototype.showPass=function(){
    console.log(this.pass);
    return this.pass;
};


var ul=new User("黃繼鵬","abc");
//調(diào)用類方法
ul.showName();//黃繼鵬

這樣寫的缺點(diǎn)

類和構(gòu)造函數(shù)不分，

類散開(kāi)了，先聲明一個(gè)構(gòu)造函數(shù)，然后對(duì)函數(shù)原型添加方法

ES6 提供了更接近傳統(tǒng)語(yǔ)言的寫法，引入了 Class（類）這個(gè)概念，作為對(duì)象的模板。通過(guò)class關(guān)鍵字，可以定義類。 先看如何定義一個(gè)class類：

class User {
    constructor(name) {          // 構(gòu)造器，相當(dāng)于es5中的構(gòu)造函數(shù)
        this.name = name         // 實(shí)例屬性
    }
    showName(){                  // 定義類的方法，不能使用function關(guān)鍵字，不能使用逗號(hào)分隔
        console.log(this.name)
    }
}
var foo = new User("黃繼鵬")
foo.showName();//黃繼鵬

es6中class類專用的構(gòu)造器，相當(dāng)于之前定義的構(gòu)造函數(shù)，每個(gè)類都必須有constructor，如果沒(méi)有則自動(dòng)添加一個(gè)空的constructor構(gòu)造器。

創(chuàng)建實(shí)例的時(shí)候自動(dòng)執(zhí)行constructor函數(shù)

constructor中的this指向?qū)嵗⑶夷J(rèn)返回this（實(shí)例）

其實(shí)class的基本類型就是函數(shù)（typeof User = "function"），既然是函數(shù)，那么就會(huì)有prototype屬性。

類的所有方法都是定義在prototype上

class User {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}
User.toValue()             // err User.toValue is not a function
User.prototype.toValue()   // 可以調(diào)用toValue方法

// 等同于

User.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

類的實(shí)例只能通過(guò)new來(lái)創(chuàng)建

除了靜態(tài)方法，定義在類上的所有的方法都會(huì)被實(shí)例繼承

除非定義在類的this對(duì)象上才是實(shí)例屬性，否則都是定義在類的原型（prototype）上

//定義類
class Point {

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return "(" + this.x + ", " + this.y + ")";
  }

}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty("x") // true
point.hasOwnProperty("y") // true
point.hasOwnProperty("toString") // false
point.proto.hasOwnProperty("toString") // true

如果在類中定義一個(gè)方法的前面加上static關(guān)鍵字，就表示定義一個(gè)靜態(tài)方法，靜態(tài)方法不會(huì)被實(shí)例繼承，但會(huì)被子類繼承，所以不能通過(guò)實(shí)例使用靜態(tài)方法，而是通過(guò)類直接調(diào)用

class User {
    constructor(name){
        this.name = name
    }
    static show(){
        console.log("123")
    }
}
class VipUser extends User{}
VipUser.show()                    // 123
User.show()                       // 123
var foo = new User("foo")
foo.show()                        // foo.show is not a function

class的靜態(tài)屬性指的是 Class 本身的屬性，目前只能通過(guò)Class.propName定義靜態(tài)屬性

靜態(tài)屬性可以被子類繼承，不會(huì)被實(shí)例繼承

class User{}
User.name = "foo" // 為class定義一個(gè)靜態(tài)屬性

class VipUser extends User{}
console.log(VipUser.name)         // foo

var foo = new User()
console.log(foo.name)             // undefined

es6是不支持私有屬性和私有方法，但是日常需求可能會(huì)用到私有屬性和私有方法，所以目前有一些提案，不過(guò)只是提案，尚未支持。

類的繼承

ES5寫法

function User(name,pass){
    this.name=name;
    this.pass=pass;
}
User.prototype.showName=function(){
    console.log(this.name);
};

/**
 * [showPass 獲取用戶密碼]
 * @return {[type]} [返回用戶密碼]
 */
User.prototype.showPass=function(){
    console.log(this.pass);
};

//繼承user類
function aUser(name, pass, type) {
    User.call(this, name, pass);
    this.type = type;
};

aUser.prototype.showType = function() {
    console.log(this.type);
};

var ul=new User("黃繼鵬","abc");
ul.showName()//黃繼鵬

var ull=new aUser("繼小鵬","ccc","男");
ul.showName();//繼小鵬
ull.showType();//男

//aUser繼承類User類，并且有自己的方法

class通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承：

class User {
    constructor(name){
        this.name = name
    }
    show(){...}
}
class VipUser extends User{
    constructor(vipName){      // 子類的構(gòu)造器
        super(vipName)         // 調(diào)用父類的constructor。相當(dāng)于User.prototype.constructor.call(this,vipName)
    }
    showVip(){...}
}

var v = new VipUser("foo")     // 創(chuàng)建實(shí)例
v instanceof VipUser           // v是子類VipUser的實(shí)例
v instanceof User              // v還是父類User的實(shí)例

super可以當(dāng)做函數(shù)使用，也可以當(dāng)做對(duì)象使用。

當(dāng)做函數(shù)使用
super作為函數(shù)調(diào)用時(shí)，代表父類的構(gòu)造函數(shù)，就是在子類的構(gòu)造器中執(zhí)行父類的constructor函數(shù)以獲取父類的this對(duì)象，因?yàn)樽宇悰](méi)有自己的this對(duì)象，所以ES6規(guī)定子類必須在constructor中執(zhí)行一次super函數(shù)。super()函數(shù)只能在子類的constructor中執(zhí)行，不能在其他地方執(zhí)行。

雖然super代表父類的構(gòu)造器，但是super()在執(zhí)行時(shí)內(nèi)部的this指向子類，所以super()就相當(dāng)于User.prototype.constructor.call(this)。

當(dāng)做對(duì)象使用
super可以作為對(duì)象調(diào)用父類的屬性和方法，在子類的普通方法中，指向父類的原型對(duì)象（即User.prototype）；在子類的靜態(tài)方法中，指向父類。

class User {
  constructor(){
    this.x = "hello"
  }
  show() {
    return 2;
  }
}

class VipUser extends User {
  constructor() {
    super();
    console.log(super.show()); // 2  此時(shí)super指向User.prototype,相當(dāng)于User.prototype.show()
    console.log(super.x)       // undefined  無(wú)法訪問(wèn)實(shí)例屬性
  }
}

let vip = new VipUser();
console.log(vip.x);//hello

由于super對(duì)象在普通函數(shù)中使用super指向User.prototype，所以super只能訪問(wèn)父類的原型上的方法，沒(méi)法訪問(wèn)父類的實(shí)例屬性和實(shí)例方法。

ES6規(guī)定如果在子類中使用super對(duì)象調(diào)用父類的方法時(shí)，方法內(nèi)部的this指向子類

class User {
    constructor() {
        this.x = 1
    }
    show() {
        return this.x;
    }
}

class VipUser extends User {
    constructor() {
        super();
        this.x = 2
        console.log(super.show())   // 2   此時(shí)show()方法內(nèi)部的this指向子類，所以輸出2，而不是1
    }
}

let vip = new VipUser();

上述代碼中雖然super.show()調(diào)用的是User.prototype.show()，但是由于通過(guò)super對(duì)象調(diào)用父類方法時(shí)，方法內(nèi)部的this指向子類，所以super.show()相當(dāng)于 super.show().call(this)，也就是User.prototype.show().call(this)

在子類的靜態(tài)方法中super對(duì)象指向父類，而不是父類的原型（User.prototype）。

class User {
    constructor() {
        this.x = 1
    }
    static fn() {
        console.log("父類靜態(tài)方法")
    }
}

class VipUser extends User {
    constructor() {
        super();
        this.x = 2
    }
    static childFn() {
        super.fn()       // 相當(dāng)于User.fn()
    }
}

VipUser.childFn()

在es5中每一個(gè)對(duì)象都有proto屬性，指向?qū)?yīng)的構(gòu)造函數(shù)的prototype屬性。Class 作為構(gòu)造函數(shù)的語(yǔ)法糖，同時(shí)有prototype屬性和proto屬性，因此同時(shí)存在兩條繼承鏈。

子類的proto屬性，表示構(gòu)造函數(shù)的繼承，總是指向父類。

子類prototype屬性的proto屬性，表示方法的繼承，總是指向父類的prototype屬性。

class User {
}

class VipUser extends User {
}

VipUser.proto === User // true
VipUser.prototype.proto === User.prototype // true

子類實(shí)例的proto屬性指向子類的原型（子類的prototype），子類實(shí)例的proto屬性的proto屬性指向父類的原型（父類的prototype）

class User {
}

class VipUser extends User {
}

var vip = new VipUser()

console.log(vip.proto === VipUser.prototype)           // true
console.log(vip.proto.proto === User.prototype)    // true

面向?qū)ο髴?yīng)用---react

react介紹:

組件化

在react里一個(gè)組件就是一個(gè)class，

依賴于JSX

jsx==babel==browser.js

ReactDOM.render(
            123,
            oDiv
        );

這種語(yǔ)法為什么會(huì)支持呢？

這個(gè)就是jsx和普通js最大的差別。

你可以認(rèn)為jsx是普通js的擴(kuò)展版本

既然是擴(kuò)展版本，那肯定會(huì)多出一些功能來(lái)。

如果不寫引號(hào)，不是字符串同時(shí)長(zhǎng)得像html，他就是可以要?jiǎng)?chuàng)建一個(gè)標(biāo)簽

切換搭配重點(diǎn)

react是一個(gè)基于組件

組件與class形式存在

我想寫一個(gè)組件，作為一個(gè)組件是不是應(yīng)該有一些基本的功能，比如我能被渲染，我有一些狀態(tài)，我有生命周期，換句話說(shuō)我現(xiàn)在不是從零開(kāi)始寫一個(gè)class，我需要很多基礎(chǔ)的類的集成。

class Test extends React.Component{
    
}

類繼承最大的意義在于一切不用從零開(kāi)始

一個(gè)類需要有構(gòu)造函數(shù)constructor.
作為繼承類，在構(gòu)造函數(shù)中需要繼承父級(jí)的屬性

組件套組件方法例子

Promise的中文含義是承諾

了解Promise之前。先來(lái)了解下同步異步

異步：操作之間沒(méi)啥管系，同時(shí)進(jìn)行多個(gè)操作
同步：同時(shí)只能做一件事

同步異步的優(yōu)缺點(diǎn)

異步：代碼更復(fù)雜
同步：代碼簡(jiǎn)單

一個(gè)頁(yè)面可能會(huì)有多個(gè)請(qǐng)求
比如淘寶網(wǎng)頁(yè)，banner區(qū)域，側(cè)邊欄，導(dǎo)航欄，右側(cè)欄，信息商品等
都是由鍍鉻接口異步請(qǐng)求組成

這就回造成代碼邏輯復(fù)雜

按照以往前端ajax請(qǐng)求寫法。一個(gè)請(qǐng)求成功后繼續(xù)請(qǐng)求嵌套。邏輯會(huì)變得異常費(fèi)勁

異步

$.ajax({
    type: "post",
    url: "/api/banner",
    success:function(result){
        console.log("成功");
        $.ajax({
            type: "post",
            url: "/api/1",
            success:function(result){
                console.log("成功");
                $.ajax({
                    type: "post",
                    url: "/api/banner",
                    success:function(result){
                        console.log("成功");
                        $.ajax({
                            type: "post",
                            url: "/api/banner",
                            success:function(result){
                                console.log("成功")
                            },
                            error:function(error){
                                console.log("失敗")
                            },
                        })
                    },
                    error:function(error){
                        console.log("失敗")
                    },
                })
            },
            error:function(error){
                console.log("失敗")
            },
        })
    },
    error:function(error){
        console.log("失敗")
    },
})

同步

let banner_data=ajax_async("/banner");
let banner_data1=ajax_async("/banner1");
let banner_data2=ajax_async("/banner2");
let banner_data3=ajax_async("/banner3");
let banner_data4=ajax_async("/banner4");

你會(huì)發(fā)現(xiàn)異步處理性能好，用戶體驗(yàn)好，但實(shí)際代碼復(fù)雜

要是同步方式頁(yè)面用戶體驗(yàn)不好

這個(gè)時(shí)候幻想一下，我能不能像同步方式來(lái)寫代碼。也像異步一樣請(qǐng)求數(shù)據(jù)。

Promise就能做到這個(gè)工作

Promise--消除異步操作

用同步書寫方式，來(lái)書寫異步方法

Promise如何使用

需要使用promise的時(shí)候，你需要new一個(gè)promise對(duì)象。

這個(gè)對(duì)象接收一個(gè)參數(shù)，是一個(gè)函數(shù)。
將異步的代碼寫在函數(shù)里

這個(gè)函數(shù)兩個(gè)參數(shù)
resolve決心
reject拒絕

//封裝Promise ajax
let p=new Promise(function(resolve,reject){
    //異步代碼塊
    //resolve--成功了
    //reject--失敗了
    $.ajax({
        type: "post",
        dataType:"json",
        url: "/api/banner",
        success:function(result){
            resolve(result);
        },
        error:function(error){
            reject(error);
        },
    })
});

//使用Promise ajax封裝
//當(dāng)Promise調(diào)用有結(jié)果了就會(huì)調(diào)用then
//then有兩個(gè)參數(shù)，都是函數(shù)，第一個(gè)是resolve，第二個(gè)是reject
p.then((result)=>{
    console.log(result);
},(error)=>{
    console.log(error);
})

function createPromise(url){
    return new Promise(function(resolve,reject){
        //異步代碼塊
        //resolve--成功了
        //reject--失敗了
        $.ajax({
            type: "post",
            dataType:"json",
            url,
            success:function(result){
                resolve(result);
            },
            error:function(error){
                reject(error);
            },
        })
    });
}


createPromise("./aa")
.then((res)=>{
    console.log(res)
},(err)=>{
    console.log(err)
})

function createPromise(url){
    return new Promise(function(resolve,reject){
        //異步代碼塊
        //resolve--成功了
        //reject--失敗了
        $.ajax({
            type: "post",
            dataType:"json",
            url,
            success:function(result){
                resolve(result);
            },
            error:function(error){
                reject(error);
            },
        })
    });
}

Promise.all([
    createPromise("./aa"),
    createPromise("./bb")
])
.then((res)=>{
    let [arr1,arr2]=res
},(err)=>{
    console.log(err)
})

generator的作用

generator-生成器

生成器是程序里面的一個(gè)概念，可以依靠它生成一堆東西

Generator可以理解為生成器，和普通函數(shù)沒(méi)多大區(qū)別，普通函數(shù)是只要開(kāi)始執(zhí)行，就一直執(zhí)行到底，而Generator函數(shù)是中間可以停，搭配使用next函數(shù)繼續(xù)執(zhí)行。

生動(dòng)的比喻

普通函數(shù)好比坐飛機(jī)，飛機(jī)起飛，不到目的地中途是不會(huì)降落的

Generator好比于出租車。可以隨叫隨停。停了再走，走了再停

function * fn(){
    alert("a")
    yield
    alert("b")
}

var f = fn()
f.next()  // a
f.next()  // b

直接調(diào)用Generator函數(shù)，是什么都不執(zhí)行的，調(diào)用第一個(gè)next()才開(kāi)始執(zhí)行，一直執(zhí)行到第一個(gè)yield停止，第二次調(diào)用next()，從第一個(gè)yield執(zhí)行到第二個(gè)yield停止，依次類推

現(xiàn)在疑惑，在真實(shí)場(chǎng)景中，我為什么要讓一個(gè)函數(shù)停呢？

剛才舉個(gè)了出租車的例子，說(shuō)白了，你為什么要讓出租車司機(jī)停車，肯定是你有事情，你要去忙，或者要求拿什么東西，或者見(jiàn)什么朋友。
等你事情辦完了，還再回來(lái)。

所以Generator特別適合一個(gè)場(chǎng)景。

比如說(shuō)你要請(qǐng)求數(shù)據(jù)。請(qǐng)求數(shù)據(jù)不是瞬間就能回來(lái)的，這個(gè)時(shí)候就需要暫停，來(lái)等他結(jié)果過(guò)來(lái)。再繼續(xù)執(zhí)行下面的操作。

/**
 * 普通函數(shù)在執(zhí)行過(guò)程中需要請(qǐng)求得到結(jié)果再執(zhí)行對(duì)應(yīng)代碼，就會(huì)出現(xiàn)代碼嵌套再嵌套
 */
function 函數(shù)(){
    代碼...

    ajax({
        代碼...
    })
}

/**
 * Generator函數(shù)可以讓代碼在那一步暫時(shí)暫停 拿到數(shù)據(jù)后再繼續(xù)往下走
 */
function *函數(shù)(){
    代碼...

    yiels ajax(xxx)

    代碼...
}

Generator是怎么做到走走停停的?

其實(shí)本質(zhì)是用Generator函數(shù)生成了一堆小函數(shù)

比方說(shuō)fn函數(shù)

function * fn(){
    alert("a")
    yield
    alert("b")
}

var f = fn()
f.next()  // a
f.next()  // b

其實(shí)他在背后生成了兩個(gè)小函數(shù)

function fn_1(){
    alert("a")
}
function fn_2(){
    alert("b")
}

當(dāng)然這個(gè)過(guò)程我們是看不見(jiàn)的
相當(dāng)于把一個(gè)大函數(shù)切分成了兩個(gè)小函數(shù)

第一次next的時(shí)候他走的是fn_1

第二次next的時(shí)候走的是fn_2

yield和next

yield代表暫時(shí)暫停執(zhí)行，next代表繼續(xù)執(zhí)行。

yield和next可以傳參數(shù)，也可以有返回值

yield可以傳參

function *show(){
    console.log("a")
    let a=yield;
    console.log("b")
    console.log(a)
}
let gen=show();
gen.next(12)
gen.next(5)

//a
//b
//5

第一次執(zhí)行next的時(shí)候執(zhí)行黃色框代碼
第二次執(zhí)行紅色框的代碼

傳參的時(shí)候通過(guò)yield來(lái)傳參的時(shí)候，第一個(gè)next是無(wú)效的，
如果想給第一個(gè)過(guò)程傳參需要使用傳統(tǒng)方法，在使用函數(shù)時(shí)傳參

function *show(num1,num2){
    console.log(`${num1},${num2}`)
    console.log("a")
    let a=yield;
    console.log("b")
    console.log(a)
}
let gen=show(11,12);
gen.next(12);//沒(méi)法給yield傳參
gen.next(5)

//11,12
//a
//b
//5

yield返回

function *show(){
    console.log("a")
    let a=yield 12;
    console.log("b")
}
let gen=show(11,12);
let res1=gen.next();
console.log(res1)
let res2=gen.next()
console.log(res2)


//a
//{value: 12, done: false}
//b
//{value: undefined, done: true}

value是yield 返回的參數(shù)
done代碼函數(shù)是否走完

為什么第二次執(zhí)行完value是空

因?yàn)榈诙蝞ext是執(zhí)行的最后一道程序，最后一道程序就沒(méi)有yield 了，如果想返回東西需要使用return

function *show(){
    console.log("a")
    let a=yield 12;
    console.log("b")
    return 111;
}
let gen=show(11,12);
let res1=gen.next();
console.log(res1)
let res2=gen.next()
console.log(res2)


//a
//{value: 12, done: false}
//b
//{value: 111, done: true}

yield 到底是個(gè)啥

這種Generator函數(shù)適用多個(gè)異步請(qǐng)求之間有邏輯分析的情況，比如有一個(gè)需求，先請(qǐng)求用戶數(shù)據(jù)，根據(jù)用戶數(shù)據(jù)的類型判斷用戶是普通用戶還是VIP用戶，然后再根據(jù)判斷結(jié)果請(qǐng)求普通商品數(shù)據(jù)或者VIP商品數(shù)據(jù)

// 借助runner腳本，runner腳本規(guī)定Generator函數(shù)執(zhí)行完一個(gè)next之后自動(dòng)執(zhí)行下一個(gè)next
runner(function() * (){
    let userData = yield $.ajax(...) // 請(qǐng)求用戶數(shù)據(jù)
    if(userData.type === "vip") {
        let goods = yield $.ajax(...) // 請(qǐng)求vip商品數(shù)據(jù)
    } else {
        let goods = yield $.ajax(...) // 請(qǐng)求普通商品數(shù)據(jù)
    }
})

第一次yield ajax其實(shí)是Promise對(duì)象，將Promise對(duì)象yield 出去。
yield 給了runner對(duì)象

將數(shù)據(jù)請(qǐng)求完成給data1

這個(gè)函數(shù)暫停了

使用Generator函數(shù)使得代碼看起來(lái)更像同步代碼，其實(shí)使用Promise同樣可以實(shí)現(xiàn)這種效果，只不過(guò)得需要在then()函數(shù)中嵌套請(qǐng)求。

異步請(qǐng)求的幾種方式

回調(diào)寫法

$.ajax({
    type: "post",
    url: "/api/banner",
    success:function(result){
        console.log("成功");
        $.ajax({
            type: "post",
            url: "/api/1",
            success:function(result){
                console.log("成功");
                $.ajax({
                    type: "post",
                    url: "/api/banner",
                    success:function(result){
                        console.log("成功");
                        $.ajax({
                            type: "post",
                            url: "/api/banner",
                            success:function(result){
                                console.log("成功")
                            },
                            error:function(error){
                                console.log("失敗")
                            },
                        })
                    },
                    error:function(error){
                        console.log("失敗")
                    },
                })
            },
            error:function(error){
                console.log("失敗")
            },
        })
    },
    error:function(error){
        console.log("失敗")
    },
})

Promise寫法

function createPromise(url){
    return new Promise(function(resolve,reject){
        //異步代碼塊
        //resolve--成功了
        //reject--失敗了
        $.ajax({
            type: "post",
            dataType:"json",
            url,
            success:function(result){
                resolve(result);
            },
            error:function(error){
                reject(error);
            },
        })
    });
}

Promise.all([
    createPromise("./aa"),
    createPromise("./bb")
])
.then((res)=>{
    let [arr1,arr2]=res
},(err)=>{
    console.log(err)
})

Generator寫法

runner(function() * (){
    let userData = yield $.ajax(...) // 請(qǐng)求用戶數(shù)據(jù)
    if(userData.type === "vip") {
        let goods = yield $.ajax(...) // 請(qǐng)求vip商品數(shù)據(jù)
    } else {
        let goods = yield $.ajax(...) // 請(qǐng)求普通商品數(shù)據(jù)
    }
})

Promise和Generator相比，Generator并沒(méi)有特別的省事

Promise也有它不適用的地方。我如果是寫死要請(qǐng)求接口。那么Promise和Generator確實(shí)沒(méi)太大區(qū)別，

Generator他的優(yōu)點(diǎn)在于適合參雜一些邏輯

比方說(shuō)在請(qǐng)求一個(gè)接口拿到用戶信息，根據(jù)信息判斷他該去請(qǐng)求哪些不同的接口

感覺(jué)比普通嵌套還麻煩

帶邏輯-Generator

// 借助runner腳本，runner腳本規(guī)定Generator函數(shù)執(zhí)行完一個(gè)next之后自動(dòng)執(zhí)行下一個(gè)next
runner(function() * (){
    let userData = yield $.ajax(...) // 請(qǐng)求用戶數(shù)據(jù)
    if(userData.type === "vip") {
        let goods = yield $.ajax(...) // 請(qǐng)求vip商品數(shù)據(jù)
    } else {
        let goods = yield $.ajax(...) // 請(qǐng)求普通商品數(shù)據(jù)
    }
})

Promise適合一次請(qǐng)求一堆場(chǎng)景
Generator適合邏輯性請(qǐng)求處理

KOA是nodejs的框架

async其實(shí)就是對(duì)Generator的封裝，只不過(guò)async可以自動(dòng)執(zhí)行next()。

async function read () {
    let data1= await new Promise(resolve => {
        resolve("100")
    })
    let data2 = await 200

return 300
}

async默認(rèn)返回一個(gè)Promise，如果return不是一個(gè)Promise對(duì)象，就會(huì)被轉(zhuǎn)為立即resolve的Promise，可以在then函數(shù)中獲取返回值。

async必須等到里面所有的await執(zhí)行完，async才開(kāi)始return，返回的Promise狀態(tài)才改變。除非遇到return和錯(cuò)誤。

async function fn () {
    await 100
    await 200
    return 300
}
fn().then(res => {
    console.log9(res) // 300
})

await也是默認(rèn)返回Promise對(duì)象，如果await后面不是一個(gè)Promise對(duì)象，就會(huì)轉(zhuǎn)為立即resolve的Promise

如果一個(gè)await后面的Promise如果為reject，那么整個(gè)async都會(huì)中斷執(zhí)行，后面的awiat都不會(huì)執(zhí)行，并且拋出錯(cuò)誤，可以在async的catch中捕獲錯(cuò)誤

async function f() {
  await Promise.reject("error");
  await Promise.resolve("hello world"); // 不會(huì)執(zhí)行
}
f().then(res =>{

}).catch(err=>{
    console.log(err)  // error
})

如果希望一個(gè)await失敗，后面的繼續(xù)執(zhí)行，可以使用try...catch或者在await后面的Promise跟一個(gè)catch方法：

// try...catch
async function f() {
  try {
    await Promise.reject("出錯(cuò)了");
  } catch(e) {
  }
  return await Promise.resolve("hello world");
}

f()
.then(v => console.log(v))   // hello world

// catch
async function f() {
  await Promise.reject("出錯(cuò)了")
    .catch(e => console.log(e));   // 出錯(cuò)了
  return await Promise.resolve("hello world");
}

f()
.then(v => console.log(v))  // hello world