码迷,mamicode.com
首页 > 其他好文 > 详细

笔记:promise实例+注释

时间:2018-02-09 22:24:43      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:catch   settime   fine   span   ajax   rip   set   code   map   

//////////////////////////////////////////////
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

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

笔记:promise实例+注释

标签:catch   settime   fine   span   ajax   rip   set   code   map   

原文地址:https://www.cnblogs.com/dkplus/p/8436541.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!