取消Promise

• promise一旦创建，就不能取消，
• 状态变化只有两种形式，由pending状态变为resolve状态或由pending状态变为reject状态
• 取消Promise，实际上也是调用Pormise的reject方法，将Promise的状态转为失败状态，从而间接做到取消Promise的效果

模拟取消ajax请求

//创建一个ajax请求
function createAjax() {
    let outerTime = setTimeout(() => {
        console.log("输出内容")
        outerTime = null
    }, 2000)
    return {
        outerTime,
        abort() {
            if (outerTime) {
                console.log("取消请求")
                clearTimeout(outerTime)
            }
        }
    }
}
// 发送ajax请求
function execute(obj) {
    const ajax = createAjax()
    if (obj.cancelConfig) {
        obj.cancelConfig.then(() => {
            ajax.abort()
        })
    }
}

// 创建一个Promise作为中介 只用调用resolve后Pormise状态才会发生变化从而调用ajax的abort方法
function createPromise() {
    let _resolve = null
    const p = new Promise((resolve) => {
        _resolve = resolve
    })
    return {
        resolve: _resolve,
        p
    }
}

const p1 = createPromise()
execute({ cancelConfig: p1.p })
setTimeout(() => {
    p1.resolve()
}, 3000)

模拟取消promise请求

// 取消Promise
function createPromise() {
    let _reject;
    const promise = new Promise((resolve, reject) => {
        _reject = reject
        setTimeout(() => {
            resolve("promise执行成功")
        }, 2000)

    })
    return {
        promise,
        abort() {
            _reject("取消Promise请求")
        }
    }
}


const p = createPromise()
p.promise.then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

p.abort()

利用promise.race模拟间接取消promise请求

/**
promise.race 将多个promise包装成一个promise
当其中一个promise状态发生变化，promise的状态就是这个先发生状态变化的promise的状态
 */

// 我们想要的promise
const p1 = new Promise((resolve) => {
    setTimeout(() => {
        resolve("执行成功")
    }, 2000)
})

// 中间者 可以把reject提取到外面执行 当某个条件下执行reject 从而做到取消p1的目的
function createPromise() {
    let _reject
    const promise = new Promise((_, reject) => {
        _reject = reject
    })
    return {
        promise,
        abort() {
            _reject("取消请求")
        }
    }
}

const pObj = createPromise()

const p3 = Promise.race([p1, pObj.promise])

p3.then(res => {
    console.log(res)
}).catch(err=>{
    console.log(err)
})
//控制abort的执行
pObj.abort()