es6 promise

2017-09-29  本文已影响14人  香芋牛奶面包

看个对ajax的简单模仿,当然真正的ajax并不是这样实现的:

function ajax(object){ //
  console.log("start ajax --------");
  object.success("data is '" + object.data + "' and acrossAjax");
}

ajax({
  data: 'milk',
  success: (data) => {
    console.log(data);
  }
});

控制台 输出:
start ajax --------
data is 'milk' and acrossAjax

当我们在一个ajax 中依赖上一个请求的参数需要进行下一次的ajax请求时会怎么做呢?

ajax({
  data: 'milk',
  success: (data) => {
    console.log(data);
    ajax({
      data: data,
      success: (data) => {
        console.log(data);
     }
  });
  }
});

控制台输出:
start ajax --------
data is 'milk' byAjax
start ajax --------
data is 'data is 'milk' byAjax' byAjax

这样子看起来 代码已经不太直观了,层层嵌套。这还只是两层,如果是三层 或则更多呢? 这就引出了promise
再让我们来看看promise 对这种情况是怎么实现的

/*********************** es6 promise start ********************/

function ajax(object){ // 封装一个支持promise的ajax
  let promise = new Promise((resolve, reject) => {
    console.log('start promise -----');
    resolve("data is '" + object.data + "' byAjax");
});
  return promise;
}

ajax({
  data: 'milk',
})
.then((data) => {
  console.log(data);
  return data; // 返回普通变量对象 这时then返回的是一个初始的promise对象,不是ajax 这个
})
.then((data) => {
  console.log(data);
  return ajax({data: data}); // 返回新的 ajax promise对象
})
.then((data) => {
  console.log(data);
});

控制台输出:
start promise -----
data is 'milk' byAjax
data is 'milk' byAjax
start promise -----
data is 'data is 'milk' byAjax' byAjax

上一篇下一篇

猜你喜欢

热点阅读