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

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

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

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:[]}
})

封装  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)
})*/