js promise object

use strict'
// 異步計算,隊列化,類比callback
// 都不是單純的普通方法,都是promise對象才生效,對象可以保存狀態,函數只有通過閉包才能保存狀態
// 異步操作的常見方法:回調和事件監聽
// 異步回調容易層次過深,可讀性差,維護性差
// 異步回調剝奪了return的能力
// promise的三個狀態:pending初始狀態,fulfilled操作成功,rejected操作失敗
// .then()返回新的promise實例,由此實現鏈式調用
// promise可以捕獲錯誤
// 常和定時器一起使用

// new Promise (() => {
//   console.log('支持promise')
// })


// let pro = new Promise(() => {})
// console.log(pro)

let randomPromise = function () {
  let randNum = Math.random() * 2
  console.log(randNum)
  if(randNum < 1) {
    setTimeout(() => {
      console.log('Success Done')
    }, randNum)
  } else {
    console.log('Failed')
  }
}

let log = function (msg) {
  console.log(msg)
}

// function test(resolve, reject) {
//     var timeOut = Math.random() * 2;
//     console.log('set timeout to: ' + timeOut + ' seconds.');
//     setTimeout(function () {
//         if (timeOut < 1) {
//             console.log('call resolve()...');
//             resolve('200 OK');
//         }
//         else {
//             console.log('call reject()...');
//             reject('timeout in ' + timeOut + ' seconds.');
//         }
//     }, timeOut * 1000);
// }

// randomPromise()
// test()
// var p1 = new Promise(test);
// var p2 = p1.then(function (result) {
//     console.log('成功:' + result);
// });
// var p3 = p2.catch(function (reason) {
//     console.log('失敗:' + reason);
// });

let emotion = 'ff'
let happyOrNot = function (resolve, reject) {
  if(emotion == 'happy') {
    resolve('I am very happy')
  } else {
    reject('I am very sad')
  }
}


// let promiseTest = new Promise(happyOrNot)
// let promiseThen = promiseTest.then(res => {
//   console.log('成功呢:' + res)
// }).catch(err => {
//   console.log('完蛋了:' + err)
// })

// 0.5秒後返回input*input的計算結果:
// function multiply(input) {
//     return new Promise(function (resolve, reject) {
//         log('calculating ' + input + ' x ' + input + '...');
//         setTimeout(resolve, 500, input * input);
//     });
// }
//
// // 0.5秒後返回input+input的計算結果:
// function add(input) {
//     return new Promise(function (resolve, reject) {
//         log('calculating ' + input + ' + ' + input + '...');
//         setTimeout(resolve, 500, input + input);
//     });
// }
//
// var p = new Promise(function (resolve, reject) {
//     log('start new Promise...');
//     resolve(123);
// });
//
// p.then(multiply)
//  .then(add)
//  .then(multiply)
//  .then(add)
//  .then(function (result) {
//     log('Got value: ' + result);
// });


function first (text) {
  return new Promise((resolve, reject) => {
    let msg = '1 the text is:' + text
    setTimeout(resolve, 500, msg)
  })
}


function second (text) {
  return new Promise((resolve, reject) => {
    let msg = '2 the second text is:' + text
    setTimeout(resolve, 500, msg)
  })
}


function third (text) {
  return new Promise((resolve, reject) => {
    let msg = '3 the third text is:' + text
    setTimeout(resolve, 500, msg)
  })
}


let final = new Promise((resolve, reject) => {
  console.log('start')
  resolve('我在人民廣場喫炸雞')
})


// final.then(first).then(second).then(third).then(res => {
//   console.log('最後的結果是:')
//   console.log(res)
// })

let one = new Promise((resolve, reject) => {
  console.log('one 1')
  setTimeout(resolve, 500, 'one')
})

let two = new Promise((resolve, reject) => {
  console.log('two 2')
  setTimeout(resolve, 500, 'two')
})

Promise.all([one, two]).then(res => {
  // 同時執行好幾個方法
  console.log('all')
  console.log(res)
})

Promise.race([one, two]).then(res => {
  // 容錯,有一個結束就算完成
  console.log('all')
  console.log(res)
})


// async 返回的是promise對象
// async和await一起用,解決回調套層級問題
function getResult (num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2 * num)
    }, 2000)
  })
}


async function gotResult () {
  let result = await getResult(8)
  let result2 = await getResult(3)
  let result3 = await getResult(7)
  let finalResult = result + result2 + result3
  console.log(finalResult)
  return new Promise ((resolve, reject) => {
    setTimeout(() => {
      resolve(result * 2)
    }, 2000)
  })
}

gotResult().then(res => {
  console.log(res)
})

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章