Promise简单实践

港控/mmm° 2022-03-25 10:38 212阅读 0赞

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

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