promise async

最簡用  promise

let res = function () {
  return new Promise((resolve, reject) => {   // 返回一個promise
    setTimeout(() => {
        resolve(10)
    }, 3000)
  })
}
res().then(x => {    // promise.then()
  let a = 20;
  a += x
  console.log(a);
})

多個異步用 async 

let res = function () {
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve(10)
    },3000)
  })
}
async function test(){
  console.log('before');  // 按順序輸出 before  b  after
  let b=await res()       // 能夠按順序執行多個 promise
  b+=30;
  console.log('b',b);
  console.log('after');
}

test();

async 返回 promise (直接在async函數裏面操做就好了，不要再返回了)

let res = function () {
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve(10)
    },3000)
  })
}
async function test(){
  let b=await res()
  console.log('b',b);
  b+=30;
  return b;   // async  返回一個 promise
}

let cc=0
test().then(x=>{   // promise then
  cc=x;
  console.log('cc',cc);
})

async  try.. catch..

let res = function (val) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (val > 3) {

        resolve(10)
      } else {
        reject(false)
      }
    }, 3000)
  })
}

async function test (val) {
  try {
    let b = await res(val)
    b+=20;
    console.log('b',b);
  } catch (e) {    //  promise有 reject時 要 try()catch{}
    if (e) {
      console.log('b is true');
    }else{
      console.log('b is false');
    }
  }
}

test(10);

promise try-catch

let res = function (val) {
  return new Promise((resolve, reject) => {   // 返回一個promise
    setTimeout(() => {
      if (val > 10) {
        resolve(10)
      }else{
        reject('no4')
      }
    }, 3000)
  })
}
res(1).then(x => {    // promise.then()
  let a = 20;
  a += x
  console.log(a);
}).catch(e=>{
  if(e==='no'){
    console.log('hahaha');
  }else{
    console.log('no input');
  }
})

 傳統回調函數

let f = function (test) { // 傳入一個函數
  setTimeout(()=>{
    let a = 10
    test(a)  // 把結果給一個函數
  },3000)
}
f(function (val) {  
  console.log(val);  // 10
})

 promise 鏈式調用    promise.then().then()

/*
* promise.then(res=>{
*   return p2    // promise的then 能夠return 一個 Promise 即執行下一個promise,其結果能夠繼續then()獲取
* }).then(res2=>{})
*
* */
let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2)
  }, 2000)
})
let p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(3)
  }, 3000)
})
p1.then((res) => {
  console.log(res) // 第一個值
  return p2    // then中返回下一個promise 可再加個 then 接收第二個值
}).then(res2 => {
  console.log(res2)
  return p3
}).then(res3 => {
  console.log(res3)
  console.log('end')
})

View Code

promise  nodejs readFile 

var fs = require('fs')

function readFile (filePath) {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, 'utf8', function (err, data) {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}

readFile('./a.txt')
  .then(data => {
    console.log(data)
    return readFile('./b.txt')
  }).then(data2 => {
  console.log(data2)
  return readFile('./c.txt')
}).then(data3 => {
  console.log(data3)
})

View Code

jq 支持 鏈式調用  $.get().then().then()

// jq 支持 鏈式調用  $.get().then().then()
var data = {}
$.get('xxx').then(user => {
  data.user = user
  return $.get('yyy')
}).then(jobs => {
  data.jobs = jobs
  console.log(data) // {user:{},jobs:[]}
})

View Code

封裝  ajax 爲 promise 和 callback

// 封裝  ajax 爲 promise 和 callback
/*
*    XMLHttpRequest.DONE === 4  mdn
    if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      console.log(xhr.responseText)
    }
*    xhr.onload = function () {
    console.log('DONE', xhr.readyState); // readyState 爲 4
};
* */
function apiGet (url, callback) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest()
    xhr.onload = function () {           // 不是標準。
      callback && callback(JSON.parse(xhr.responseText)) // 回調
      resolve(JSON.parse(xhr.responseText))
    }
    xhr.onerror = function (err) {
      reject(err)
    }
    xhr.open('get', url, true)
    xhr.send()
  })
}

// json-server -w a.json -p 1234
apiGet('http://localhost:1234/posts').then(res => {
  console.log(res)
})
/*
apiGet('http://localhost:1234/posts',function (res) {
  console.log(res)
})*/

View Code