摘要：聲明，只是簡(jiǎn)單地提了提的基本使用，大牛繞道先看一個(gè)例子你需要知道是個(gè)庫(kù)返回一個(gè)實(shí)例你可以把理解為，它們功能相近，只不過(guò)遵循規(guī)范我是第二個(gè)我是第二個(gè)為了防止你對(duì)這個(gè)鏈?zhǔn)秸{(diào)用看得眼花繚亂，我把這個(gè)給簡(jiǎn)化一下成功回調(diào)失敗回調(diào)成功回調(diào)失敗回調(diào)，準(zhǔn)備

聲明，只是簡(jiǎn)單地提了提promise的基本使用，大牛繞道^_^

你需要知道
1.axios是個(gè)庫(kù)
2.axios()返回一個(gè)Promise實(shí)例
3.你可以把a(bǔ)xios()理解為$.ajax()，它們功能相近，只不過(guò)axios遵循promise規(guī)范

axios({
    url: "."
}).then((resolve) => {
    console.log(resolve)
    return "我是第二個(gè)then"
}, (reject) => {
    console.log(reject)
}).then((resolve_2) => {
    console.log(resolve_2) // "我是第二個(gè)then"
}, (reject_2) => { 
    console.log(reject_2)
})

為了防止你對(duì)這個(gè)鏈?zhǔn)秸{(diào)用看得眼花繚亂，我把這個(gè)給簡(jiǎn)化一下

axios({
    url: "."
}).then(成功回調(diào), 失敗回調(diào))
  .then(成功回調(diào)2, 失敗回調(diào)2)

ok，準(zhǔn)備好了嗎？下面我們先來(lái)了解Promise的一些基本概念

Promise是專門用來(lái)解決異步編程問(wèn)題的，避免了層層嵌套的回調(diào)函數(shù)[Callback Hell]
下面是一個(gè)用傳統(tǒng)方法Callback Hell來(lái)寫的異步代碼
可以非常明顯地看出來(lái)，Callback Hell的方式讓代碼的可讀性變得非常差

function loadImg(src, callback, fail) {
    let img = new Image()
    img.onload = function () {
        // 成功回調(diào)
        callback(img)
    }
    img.onerror = fail // 失敗回調(diào)
    img.src = src
}

let src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
loadImg(src, function (img) {
    console.log(img.width)
}, function () {
    console.log("error")
})

pending初始態(tài)，既不成功也不失敗

fulfilled異步操作成功

rejected異步操作失敗

Promise對(duì)象代表一個(gè)異步操作，且只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無(wú)法改變這個(gè)狀態(tài)，peding可轉(zhuǎn)化為fulfilled與rejected，但fulfilled與rejected不可相互轉(zhuǎn)化

那知道這三個(gè)狀態(tài)又有什么用咧？
OK，我們看下面的代碼

axios({
    url: "."
}).then(成功回調(diào), 失敗回調(diào))

axios({url: "."})
異步操作成功代表了pending -> fulfilled -> then里的第一個(gè)參數(shù)【成功回調(diào)】
異步操作失敗代表了pending -> rejected -> then里的第二個(gè)參數(shù)【失敗回調(diào)】

因?yàn)?Promise.prototype.then 和 Promise.prototype.catch 方法返回promise 對(duì)象
所以它們可以被鏈?zhǔn)秸{(diào)用。

OK，下面讓我們仔細(xì)看一下回調(diào)觸發(fā)機(jī)制究竟怎樣的過(guò)程

axios({
    url: "."
}).then(成功回調(diào), 失敗回調(diào))
  .then(成功回調(diào)2, 失敗回調(diào)2)

是不是看的有點(diǎn)暈？沒(méi)關(guān)系，下面我來(lái)詳細(xì)解釋一下
1.異步操作成功 -> 進(jìn)入第一個(gè)then的成功回調(diào) -> 成功回調(diào)執(zhí)行異步操作成功 -> 由于又返回了一個(gè)Promise實(shí)例，其狀態(tài)由于異步操作成功，由pending轉(zhuǎn)為了fullfiled，所以還可以再調(diào)用第二個(gè)then -> 進(jìn)入第二個(gè)then的成功回調(diào)2
2.異步操作失敗-> 進(jìn)入第一個(gè)then的失敗回調(diào) -> 失敗回調(diào)執(zhí)行異步操作成功 -> 由于又返回了一個(gè)Promise實(shí)例，其狀態(tài)由于異步操作成功，由pending轉(zhuǎn)為了fullfiled，所以還可以再調(diào)用第二個(gè)then -> 進(jìn)入第二個(gè)then的成功回調(diào)2

你的問(wèn)題：
1.為什么第一個(gè)then不論調(diào)用成功回調(diào)還是失敗回調(diào)，第二個(gè)then都會(huì)調(diào)用成功回調(diào)2呢
答：因?yàn)榈诙€(gè)then調(diào)用進(jìn)入哪個(gè)回調(diào)函數(shù)，完全是看第一個(gè)then返回的Promise是什么狀態(tài)，換言之 —— 看異步操作成功與否

舉一個(gè)栗子

axios({
    url: "."
}).then((resolve) => {
    return xxx 
    // 注意xxx是個(gè)未聲明的變量
    // 瀏覽器會(huì)報(bào)錯(cuò)，說(shuō)明異步操作失敗了
    // 所以第一個(gè)then返回的Promise的狀態(tài)是 rejected
}, (reject) => {})
    .then((resolve_2) => {
    console.log(1)
}, (reject_2) => {
    // 所以第二個(gè)then只會(huì)調(diào)用它的第二個(gè)參數(shù)
    console.log(2)
})

2.你咋不提catch咧？
因?yàn)?b>catch就是then的一個(gè)語(yǔ)法糖呀
catch等價(jià)于then只有第二個(gè)參數(shù)【失敗回調(diào)】的形式
上面的例子用catch，可以這么寫

axios({
    url: "."
}).then((fulfilled) => {
    return xxx
    // 注意xxx是個(gè)未聲明的變量
    // 所以第一個(gè)then返回的Promise的狀態(tài)是 rejected
}, (rejected) => {
}).catch((rejected) => {
    // 所以直接進(jìn)入catch
    console.log(2)
})

第一步

// 聲明一個(gè)函數(shù) 讓這個(gè)函數(shù)返回一個(gè)Promise實(shí)例
let setPromise = function () {
    return new Promise()
}

第二步

// new Promise()接受一個(gè)函數(shù)
// 規(guī)定這個(gè)函數(shù)必須要有兩個(gè)參數(shù)【成功回調(diào)，失敗回調(diào)】
let a = 0
let setPromise = function () {
    let fn = (x, y) => {
        setTimeout(() => {
            x("success") 
            // 一定要寫上異步操作成功后，會(huì)調(diào)用的回調(diào)函數(shù)
        }, 2000)
    }
    return new Promise(fn)
    // 在new的過(guò)程中一定有一句fn.call(undefined, fulfilled, rejected)
}

第三步

// 寫的更裝逼點(diǎn)，順別把x，y換個(gè)名字【其實(shí)是規(guī)定】
let setPromise = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("success")
        }, 2000)
    }) // 在new的過(guò)程中一定有一句fn.call(undefined, fulfilled, rejected)
}

第四步

// 你要做什么，就用then輸入到這個(gè)Promise實(shí)例里面去
let promiseInstance = setPromise()
promiseInstance.then((success) => {
    console.log(success) // "success"
}, () => { 
    console.log("失敗啦")
})

總結(jié)

let setPromise = function () {
    return new Promise((resolve, reject) => {
        // 你的異步代碼
        setTimeout(() => {
            resolve("success") // 給成功回調(diào)resolve傳遞一個(gè)參數(shù) "success"
            console.log("測(cè)試一下") // 兩秒之后被執(zhí)行
        }, 2000)
    })
}
// 你要做什么，就用then輸入到這個(gè)Promise實(shí)例里面去
let promiseInstance = setPromise()
promiseInstance.then((resolve) => {
    // 異步操作執(zhí)行成功后執(zhí)行
    console.log(resolve) // "success"
    console.log("完美運(yùn)行") // "完美運(yùn)行"
}, () => {
    console.log("失敗啦")
})

其實(shí)對(duì)于Promise和then有一個(gè)更具象化的理解
Promise的中文翻譯是承諾，then的中文翻譯是然后
所以，你可以想象你去買橘子，結(jié)果店里沒(méi)有進(jìn)貨，店員對(duì)你Promise，只要他店里到貨，then他就會(huì)通知你