Promise chain
===

javascript 的非同布

function asyncDemo() {
    taskA();
    taskB();
    taskC();
}

function taskA (){
    setTimeout(function(){
    console.log('A');
}, 3000);
}

function taskB() {
    setTimeout(function(){
    console.log('B');
}, 500);
}

function taskC() {
    setTimeout(() => {
    console.log('C');
}, 1500);
}

若執行 asyncDemo();
輸出為 ?
Ans: B C A

---

const taskA = () => {
  return new Promise(function (resolve, reject) {
      setTimeout(function () {
          console.log('taskA');
          resolve('Async Hello world: A');
      }, 3000);
  });
}

const taskB = () => {
  return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('taskB');
            resolve('Async Hello world: B');
        }, 1500);
    });
}

const taskC = () => {
  return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('taskC');
            resolve('Async Hello world: C');
        }, 750);
    });
}

### 執行主程式

方法一 :

taskA().then(function(stringA){
    console.log(stringA);
    return taskB();
  }).then(function(stringB){
    console.log(stringB);
    return taskC();
  }).then(function(stringC){
    console.log(stringC);
  });

執行結果


方法二 :

taskA()
  .then(taskB)
  .then(taskC);

執行結果


方法二帶參數:

const getFirstUser = () => new Promise((rs, rj) => {
    getUserList('http://xxxx.com').then((userList) => {
        rs(data[0]);
    }).catch((err)=>{ rj(err) })
});
const getAvatar = (userData) => new Promise((rs, rj) => {
    getUserAvatar(userData).then((avatar) => {
        rs(avatar);
    }).catch((err) => { rj(err); })
});

getFirstUser()
.then(getAvatar)
.then((avatar) => {console.log('get avatar success', avatar)})
.catch((e)=>{ console.err(e)});

#### 補充

http://stackoverflow.com/questions/36490803/javascript-promises-and-settimeout


[Promise chain book](http://azu.github.io/promises-book/#ch2-promise.then)



---

之前在coding時剛好翻了一下之前提過的promise book

我發現他當中有提到若想要在promise chain 內的then 做拋錯處理時 應該要怎麼用比較好

文章如下 -> http://azu.github.io/promises-book/#not-throw-use-reject

**大意: 當要在 then 中拋錯時 return Promise.reject() 會比 throw Error 的方式還好**

寫個簡單的範例如下

const demoChain = params => new Promise((resolve, reject) => {
  const { a, b } = params;
  asyncFunA(a)
    .then((result) => {
      // if (!result) throw new Error('whatever');
      if (_.isEmpty(result)) return Promise.reject('whatever');
      return asyncFunB(b);
    })
    .then((result) => {
      if (!result) return Promise.reject('whatever');
      return Promise.resolve('hello world'); // origin : resolve('hello world'); but ESLint will error: [eslint] Expected to return a value at the end of arrow function. (consistent-return)
    })
    .then((result) => { // get result from Promise.resolve
      console.log(result) // 'hello world'
      resolve(result);
    })
    .catch((error) => { // will catch Promise.reject
      console.log(error); // 'whatever'
      reject(error);
    });
});