Promise的使用与优化

初步的链式调用

new Promise((resolve, reject) => {
    ajax('static/a.json', res => {
        console.log(res)
        resolve()
    })
}).then(res => {
    console.log('a成功')
    return new Promise((resolve, reject) => {
        ajax('static/b.json', res => {
            console.log(res)
            resolve()
        })
    })
}).then(res => {
    console.log('b成功')
    return new Promise((resolve, reject) => {
        ajax('static/c.json', res => {
            console.log(res)
            resolve()
        })
    })
}).then(res => {
    console.log('c成功')
})

console的打印结果依次是：

代码的初步优化

function getPromise(url) {
    return new Promise((resolve, reject) => {
        ajax(url, res => {
            resolve(res)
        })
    });
}
getPromise('static/a.json')
    .then(res => {
        console.log(res)
        return getPromise('static/b.json')
    })
    .then(res => {
        console.log(res)
        return getPromise('static/c.json')
    })
    .then(res => {
        console.log(res)
    });

代码简洁了很多，并且可读性增强了。避免回调地狱的出现

为何要将 getPromise() 进行 return处理， 因为getPromise()方法返回的是一个promise对象，如果不return，就会默认返回一个 空的 Promise对象，打印的时候会输出undefined

Promise的错误处理catch

getPromise('static/aa.json')
    .then(res => {
        console.log(res)
        return getPromise('static/b.json')
    })
    .then(res => {
        console.log(res)
        return getPromise('static/c.json')
    })
    .then(res => {
        console.log(res)
    })
    .catch(err => {
        console.log(err)
    })

因为static/aa.json 文件不存在，所以promise是无法执行下去，会报错，利用catch捕获报错，直接停止运行后面的promise函数
catch可以看做是 promise 的错误 统一处理

最终处理finally

可以用finally来处理弹出框的销毁
promise请求不管成功还是失败，之后都会执行finally方法

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
    // reject('fail')
  }, 1000)
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
}).finally(() => {
  console.log('finally')
});