Promise简单实践

demo1 

    // 这个 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);
    })

demo2

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);

Demo3：

  fun1() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("1")
        resolve("p1")
      }, 1000)
    })
  },

  fun2() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("2")
        resolve("p2")
      }, 2000)
    })
  },
  fun3() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("3")
        resolve("p3")
      }, 3000)
    })
  },

  fun1().then((res) => {
    console.log(res)
    return this.fun2()
  }).then((res) => {
    console.log(res)
    return this.fun3()
  }).then((res) => {
    console.log(res)
  })



//全部执行成功后执行
    Promise.all([this.fun1(),this.fun2(),this.fun3()]).then((res)=>{
      console.log(res)
    })
//一个执行成功就执行，可以做超时任务判断
    Promise.race([this.fun1(),this.fun2(),this.fun3()]).then((res)=>{
      console.log(res)
    })