浅析Promise

2019年8月24日 196次阅读 来源: bluesboneW

声明，只是简朴地提了提promise的基础运用，大牛绕道^_^

1.先看一个例子

你须要晓得
1.axios是个库
2.axios()返回一个Promise实例
3.你能够把axios()明白为$.ajax()，它们功用邻近，只不过axios遵照promise范例

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

为了防备你对这个链式挪用看得头昏眼花，我把这个给简化一下

axios({
    url: '.'
}).then(胜利回调, 失利回调)
  .then(胜利回调2, 失利回调2)

ok，预备好了吗？下面我们先来相识Promise的一些基础概念

2.Promise的基础概念

2.1Promise的作用

Promise是特地用来处理异步编程题目的，避免了层层嵌套的回调函数[Callback Hell]
下面是一个用传统要领Callback Hell来写的异步代码
能够异常明显地看出来，Callback Hell的体式格局让代码的可读性变得异常差

function loadImg(src, callback, fail) {
    let img = new Image()
    img.onload = function () {
        // 胜利回调
        callback(img)
    }
    img.onerror = fail // 失利回调
    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')
})

2.2 Promise的三个状况

  1. pending初始态，既不胜利也不失利
  2. fulfilled异步操纵胜利
  3. rejected异步操纵失利

Promise对象代表一个异步操纵，且只需异步操纵的效果，能够决议当前是哪种状况，任何其他操纵都没法转变这个状况，peding可转化为fulfilled与rejected，但fulfilled与rejected不可互相转化

那晓得这三个状况又有什么用咧？
OK，我们看下面的代码

axios({
    url: '.'
}).then(胜利回调, 失利回调)

axios({url: '.'})
异步操纵胜利代表了pending -> fulfilled -> then里的第一个参数【胜利回调】
异步操纵失利代表了pending -> rejected -> then里的第二个参数【失利回调】

3.then和catch的链式挪用

因为 Promise.prototype.then 和 Promise.prototype.catch 要领返回promise 对象
所以它们能够被链式挪用。

OK，下面让我们仔细看一下回调触发机制终究如何的历程

axios({
    url: '.'
}).then(胜利回调, 失利回调)
  .then(胜利回调2, 失利回调2)

《浅析Promise》
是否是看的有点晕？没紧要，下面我来细致解释一下
1.异步操纵胜利 -> 进入第一个then的胜利回调 -> 胜利回调实行异步操纵胜利 -> 因为又返回了一个Promise实例，其状况因为异步操纵胜利，由pending转为了fullfiled，所以还能够再挪用第二个then -> 进入第二个then的胜利回调2
2.异步操纵失利-> 进入第一个then的失利回调 -> 失利回调实行异步操纵胜利 -> 因为又返回了一个Promise实例，其状况因为异步操纵胜利，由pending转为了fullfiled，所以还能够再挪用第二个then -> 进入第二个then的胜利回调2

你的题目：
1.为何第一个then不管挪用胜利回调照样失利回调，第二个then都邑挪用胜利回调2呢
答：因为第二个then挪用进入哪一个回调函数，完全是看第一个then返回的Promise是什么状况，换言之 —— 看异步操纵胜利与否

《浅析Promise》
举一个栗子

axios({
    url: '.'
}).then((resolve) => {
    return xxx 
    // 注重xxx是个未声明的变量
    // 浏览器会报错，申明异步操纵失利了
    // 所以第一个then返回的Promise的状况是 rejected
}, (reject) => {})
    .then((resolve_2) => {
    console.log(1)
}, (reject_2) => {
    // 所以第二个then只会挪用它的第二个参数
    console.log(2)
})

2.你咋不提catch咧？
因为catch就是then的一个语法糖呀
catch等价于then只需第二个参数【失利回调】的情势
上面的例子用catch，能够这么写

axios({
    url: '.'
}).then((fulfilled) => {
    return xxx
    // 注重xxx是个未声明的变量
    // 所以第一个then返回的Promise的状况是 rejected
}, (rejected) => {
}).catch((rejected) => {
    // 所以直接进入catch
    console.log(2)
})

4.本身写一个Promise

第一步

// 声明一个函数 让这个函数返回一个Promise实例
let setPromise = function () {
    return new Promise()
}

第二步

// new Promise()接收一个函数
// 划定这个函数必需要有两个参数【胜利回调，失利回调】
let a = 0
let setPromise = function () {
    let fn = (x, y) => {
        setTimeout(() => {
            x('success') 
            // 一定要写上异步操纵胜利后，会挪用的回调函数
        }, 2000)
    }
    return new Promise(fn)
    // 在new的历程中一定有一句fn.call(undefined, fulfilled, rejected)
}

第三步

// 写的更装逼点，顺别把x，y换个名字【实际上是划定】
let setPromise = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('success')
        }, 2000)
    }) // 在new的历程中一定有一句fn.call(undefined, fulfilled, rejected)
}

第四步

// 你要做什么，就用then输入到这个Promise实例内里去
let promiseInstance = setPromise()
promiseInstance.then((success) => {
    console.log(success) // 'success'
}, () => { 
    console.log('失利啦')
})

总结

let setPromise = function () {
    return new Promise((resolve, reject) => {
        // 你的异步代码
        setTimeout(() => {
            resolve('success') // 给胜利回调resolve通报一个参数 'success'
            console.log('测试一下') // 两秒以后被实行
        }, 2000)
    })
}
// 你要做什么，就用then输入到这个Promise实例内里去
let promiseInstance = setPromise()
promiseInstance.then((resolve) => {
    // 异步操纵实行胜利后实行
    console.log(resolve) // 'success'
    console.log('圆满运转') // '圆满运转'
}, () => {
    console.log('失利啦')
})

5.末了

实在关于Promise和then有一个更具象化的明白
Promise的中文翻译是许诺，then的中文翻译是然后
所以，你能够设想你去买橘子，效果店里没有进货，伙计对你Promise，只需他店里到货，then他就会关照你

    原文作者：bluesboneW
    原文地址: https://segmentfault.com/a/1190000014024922
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞