笔记：promise实例+注释

Posted 2020-10-24 dkplus

//////////////////////////////////////////////
var data = [1,2,3,4];
var promise = new Promise((resolve, reject) => {
  console.log('init');

  resolve(data); //成功的时候传入的参数data
  reject(error); //失败的时候传入的参数error
});

promise
.then((data) => {
  console.log(data); //成功
  return data; //返回data给下一个then()
})
.then((val) => { //val指上面返回的data，所以数据与命名无关
  val.map((item) => {
    console.log(item); //成功
  });
})
.then(() => {
  throw new Error('error!!!'); //抛出错误
})
.catch((error) => {
  console.log('error '+ error); //捕获错误，让程序继续运行
})
.then((data) => {
  console.log(typeof data); //undefined，因为data没有传过来
})

///////////////////////////////////////////工作流
let data = 'this is data'
function asyncFunc(data) {
  return new Promise((resolve, reject) => {
    resolve(data);
    reject(error);
  });
}

asyncFunc(data)
.then((data) => {
  console.log(data);
})
.catch((error) => {
  console.log(error);
})

////////////////////////////ajax与异步操作

function getUrl(url) {
  return new Promise((resolve, reject) => {
    let req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.onload = () => {
      req.status === 200
        ? resolve(req.responseText)
        : reject(new Error(req.statusText))
    }
    req.send();
  });
}

let url = 'http://httpbin.org/get';

// 异步操作，resolve状态后不会立即执行then()
getUrl(url) // 1
.then((data) => { // 7/8
  console.log(data);
})
.catch((error) => {
  console.error(error);
})

console.log('1'); // 2
setTimeout(() => { // 5
  console.log('2');
}, 0);
setTimeout(() => { // 6
  console.log('3');
}, 0);
setTimeout(() => {  // 7/8 根据时间而定，等待时间长会先执行then()
  console.log('4');
}, 1000);
console.log('5'); // 3
console.log('6'); // 4

//////////////////////////////////////