JavaScript Promise 异步编程的一些代码分享

基本用法

const promise = new Promise((resolve, reject) => {
    // 如果成功
    resolve(33)

    // 如果失败
})

// 使用
promise.then(
    v => console.log(v), // 成功
    err => console.log(err) // 失败
)

错误处理

const promise = new Promise((resolve, reject) => {
    // 如果成功
    // resolve(33)

    // 如果失败
    reject(new Error("promise rejected"))
})

// 使用
promise.then(
    v => console.log(v), // 成功
    err => console.log(err) // 失败
)

模拟 Ajax 请求

// 模拟 ajax 方法
const ajax = url => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.responseType = "json"
        xhr.onload = () => {
            console.log("xxx", this)
            if (this.status === 200) {
                resolve(this.response)
            } else {
                reject(new Error(this.statusText))
            }
        }
        xhr.send()
    })
}

// 使用
ajax("https://reqres.in/api/users?page=2").then(
    res => console.log(res),
    error => console.log(error)
)

通过 all 发送并发请求

// 模拟 ajax 方法
function ajax(url) {
    return new Promise(function (resolve, reject) {
        const xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.responseType = "json"
        xhr.onload = function () {
            console.log("xxx", this)
            if (this.status === 200) {
                resolve(this.response)
            } else {
                reject(new Error(this.statusText))
            }
        }
        xhr.send()
    })
}

// 同一个页面中,需要同时请求多个接口的数据
// 且每个接口不会有依赖,是独立的
const req = Promise.all([
    ajax("/users.json"),
    ajax("/users.json"),
    ajax("/users.json"),
])

// 获取请求的结果
req.then(vals => console.log(vals))
    .catch(err => console.log("失败了:", err))

获取所有 URL 然后并发向每个 URL 发送请求

// 模拟 ajax 方法
function ajax(url) {
    return new Promise(function (resolve, reject) {
        const xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.responseType = "json"
        xhr.onload = function () {
            if (this.status === 200) {
                resolve(this.response)
            } else {
                reject(new Error(this.statusText))
            }
        }
        xhr.send()
    })
}

// 发送请求
ajax("/urls.json").then(v => {
    const urls = Object.values(v)
    // 向每个 URL 并行的发请求
    const tasks = urls.map(url => ajax(url))
    return Promise.all(tasks)
}).then(values => console.log(values))
    .catch(err => console.log(err))

通过 race 实现超时处理

// 模拟 ajax 方法
function ajax(url) {
    return new Promise(function (resolve, reject) {
        const xhr = new XMLHttpRequest()
        xhr.open("GET", url)
        xhr.responseType = "json"
        xhr.onload = function () {
            if (this.status === 200) {
                resolve(this.response)
            } else {
                reject(new Error(this.statusText))
            }
        }
        xhr.send()
    })
}

// 发送请求
const req = ajax("/users.json")
const timeout = new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error("timeout")), 500)
})

Promise.race([req, timeout])
    .then(v => console.log(v))
    .catch(err => console.log("失败了", err))