Promise简单实践

案例一 

    // 这个 get 是 callback 方式的 API
    // 可以使用 Promise 来解决这个问题
    function get(url, callback) {
        var oReq = new XMLHttpRequest()
        // 当请求加载成功之后要调用指定的函数
        oReq.onload = function () {
            // 我现在需要得到这里的 oReq.responseText
            callback(oReq.responseText)
        }
        oReq.open("get", url, true)
        oReq.send()
    }

//封装一个即支持Promise又支持回调函数的方式
    function pGet(url, callback) {
        return new Promise(function (resolve, reject) {
            var oReq = new XMLHttpRequest()
            // 当请求加载成功之后要调用指定的函数
            oReq.onload = function () {
                // 我现在需要得到这里的 oReq.responseText
                callback && callback(JSON.parse(oReq.responseText))
                resolve(JSON.parse(oReq.responseText))
            }
            oReq.onerror = function (err) {
                reject(err)
            }
            oReq.open("get", url, true)
            oReq.send()
        })
    }

    //方式一:Promise链式调用
    pGet('http://127.0.0.1:3000/users/4')
        .then(function (data) {
            console.log(data)
        })
    //方式二:回调函数
    pGet('http://127.0.0.1:3000/users/4',function (data) {
        console.log(data);
    })

案例二


var getDate = function (a, b) {
    return new Promise(function (resolve, reject) {
        var sum = a + b
        if (true) {
            resolve(sum)
        } else {
            reject(sum)
        }
    })
}
 
getDate(1, 1)
    .then(function (data) {
        console.log(data);
        return getDate(3, 3)
    })
    .then(function (data) {
        console.log(data);
        return getDate(5, 5)
    })
    .then(function (data) {
        console.log(data);

猜你喜欢

转载自blog.csdn.net/TCF_JingFeng/article/details/86561309