Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

ES系列文章

Promise

Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数，要是为了解决异步处理回调地狱(也就是循环嵌套的问题)而产生的Promise构造函数包含一个参数和一个带有resolve（成功）和reject（失败）两个参数的回调。

// resolve 成功
// reject 失败
let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('imooc')
        // resolve()
        // reject()
        // if(){
        //     resolve()
        // }else{
        //     reject()
        // }
        // resolve('成功')
        reject('失败')
    }, 1000)
}).then(res => {
    console.log(res)
}, err => {
    console.log(err)
})

在回调中执行一些操作（例如异步），如果一切都正常，则调用resolve，否则调用reject。对于已经实例化过的Promise对象可以调用Promise.then()方法，传递resolve和reject方法作为回调。then()方法接收两个参数：resolve和reject，分别代表当前Promise对象在成功或失败。

then

let p = new Promise((resolve, reject) => {
    console.log(1)
    resolve()
})
console.log(2)
p.then(res => {
    console.log(3)
})

then后面有两个方法，第一个是读取成功之后的操作，第二个是读取失败的操作（可写可不写）

截图20220319155751.png

Promise有几种状态三个状态：pending、fulfilled、rejected
两个过程：pending->fulfilled、pending->rejected
什么时候会进入catch当pending为rejectd时，会进入catch

let p1 = new Promise((resolve, reject) => {
    resolve(1)
})
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2)
    }, 1000)
})
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(3)
    }, 1000)
})
console.log(p1) // resolved
console.log(p2) // pending
console.log(p3) // pending
setTimeout(() => {
    console.log(p2)
}, 2000)
setTimeout(() => {
    console.log(p3)
}, 2000)

p1.then(res => {
    console.log(res)
})
p2.then(res => {
    console.log(res)
})
p3.catch(err => {
    console.log(err)
})

//pending->fulfilled
let p = new Promise((resolve, reject) => {
    reject(2)
    resolve(1)
})
p.then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

Promise状态确定了就不可以改变。

function ajax(url, successCallback, failCallback) {
    // 1、创建XMLHttpRequest对象
    var xmlhttp
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else { // 兼容早期浏览器
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 2、发送请求
    xmlhttp.open('GET', url, true)
    xmlhttp.send()
    // 3、服务端响应
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var obj = JSON.parse(xmlhttp.responseText)
            // console.log(obj)
            successCallback && successCallback(obj)
        } else if (xmlhttp.readyState === 4 && xmlhttp.status === 404) {
            failCallback && failCallback(xmlhttp.statusText)
        }
    }
}

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成功')
})

function getPromise(url) {
    return new Promise((resolve, reject) => {
        ajax(url, res => {
            resolve(res)
        }, err => {
            reject(err)
        })
    })
}
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)
    })
getPromise('static/aa.json')
    .then(res => {
        console.log(res)
        return getPromise('static/b.json')
    }, err => {
        console.log(err)
        return getPromise('static/b.json')
    }).then(res => {
        console.log(res)
        return getPromise('static/c.json')
    }).then(res => {
        console.log(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)
    }).catch(err => {
        console.log(err)
    })

一个前端小白，若文章有错误内容，欢迎大佬指点讨论！

ES6 | Promise

ES系列文章

Promise

then