Javascript异步回调细数：promise yield async/await

function timeout(value) {
  return new Promise(((resolve) => {
    setTimeout(() => {
      value++;
      resolve(value);
    }, 500);
  }));
}
timeout(0).then((res) => {
  console.log('res');
  console.log(res);
});
async function test(value) {
  console.log('value');
  const c = await timeout(value);
  console.log(c);
}
test(0);

function f () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(1);
      resolve(2);
      console.log('aaa')
    }, 0);
  });
}
let p = f();
p.then((res) => {
  console.log('resolve');
  console.log(res);
},(res) => {
  console.log('reject')
  console.log(res);
}).catch(res => {
  console.log('catch')
  console.log(res);
});

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1000);
  }, 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(100);
  }, 100);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(500);
  }, 500);
});
Promise.all([p1, p3, p2]).then((results) => {
  console.log(results);
});
Promise.race([p1, p3, p2]).then((results) => {
  console.log(results);
});

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(1000);
  }, 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(100);
  }, 100);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(500);
  }, 500);
});
Promise.all([p1, p3, p2]).then((results) => {
  console.log(results);
});

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(1000);
  }, 1000);
}).catch((res) => {
  console.log(res);
});

import axios from 'axios';

const requests = ['requestData1', 'requestData1'];
const promises = requests.map(req => axios.get('url', req).catch((resp) => {
  // TODO
}));
Promise.all(promises).then((results) => {
  results.forEach((res) => {
    // TODO
  });
});

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('p1');
    resolve(1000);
  }, 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('p2');
    resolve(100);
  }, 100);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('p3');
    resolve(500);
  }, 500);
});

Promise.race([p1, p3, p2]).then((results) => {
  console.log(results);
});

function promiseA (callback) {
  this.status = 'pending'
  let doneList = []
  let failList = []

  this.then = function (done, fail) {
    switch (this.status) {
      case 'pending':
        doneList.push(done)
        failList.push(fail)
        break
      case 'fulfilled':
        done()
        return this
      case 'rejected':
        fail && fail()
        return this
    }
  }

  function resolve (result) {
    this.status = 'fulfilled'
    setTimeout(function () {
      let value = result
      for (let i = 0; i < doneList.length; i++) {
        let temp = doneList[i](value)
        if (temp instanceof PromiseA) {
          for (i++; i < doneList.length; i++) {
            temp.then(doneList[i], failList[i])
          }
        } else {
          value = temp
        }
      }
    }, 0)
  }

  function reject (error) {
    this.status = 'rejected'
    setTimeout(function () {
      let value = error
      let temp = failList[0] && failList[0](value)
      for (let i = 1; i < failList.length; i++) {
        if (temp instanceof PromiseA) {
          temp.then(doneList[i], failList[i])
        } else {
          doneList.shift()
          failList.shift()
          value = temp
          resolve(value)
        }
      }
    }, 0)
  }
  
  callback(resolve,reject)
}

function* helloWorldGenerator() {
  yield 'hello';//该函数的状态
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();
console.log(hw.next());    //{ value: 'hello', done: false }  
//Generator 函数开始执行，直到遇到第一个yield表达式为止。next方法返回一个对象，它的value属性就是当前yield表达式的值hello，done属性的值false，表示遍历还没有结束。
console.log(hw.next());    //{ value: 'world', done: false }
//第二次调用，Generator 函数从上次yield表达式停下的地方，一直执行到下一个yield表达式。next方法返回的对象的value属性就是当前yield表达式的值world，done属性的值false，表示遍历还没有结束。
console.log(hw.next());    //{ value: 'ending', done: true }
console.log(hw.next());    //{ value: undefined, done: true }
//第四次调用，此时 Generator 函数已经运行完毕，next方法返回对象的value属性为undefined，done属性为true。以后再调用next方法，返回的都是这个值。

for(let v of helloWorldGenerator()){
  console.log(v);    // hello world
}

const makeRequest = () => {
    try {
    getJSON()
        .then(result => {
            // this parse may fail
            const data = JSON.parse(result)
            console.log(data)
        })
        // uncomment this block to handle asynchronous errors
        // .catch((err) => {
        //   console.log(err)
        // })
        } 
    catch (err) {
        console.log(err)
    }
}

const makeRequest = async () => {
      try {
          // this parse may fail
          const data = JSON.parse(await getJSON())
          console.log(data)
      } 
      catch (err) {
          console.log(err)
      }
   }

async function getData () {
    //await the response of the fetch call
    let response = await fetch('https://api.github.com/users');
    //proceed once the first promise is resolved.
    let data = await response.json();
    //proceed only when the second promise is resolved
    return data;
}
//call getData function
getData().then(data => console.log(data));//log the data

class App extends React.Component{
  constructor(){
   super();
   this.state = {
    serverResponse: ''
   }
  }
  componentDidMount(){
     this.getData();
  }
  async getData(){
   const res = await axios.get('url-to-get-the-data');
   const { data } = await res;
   this.setState({serverResponse: data})
   const res = await axios.post('url-to-post-the-data', {username,password});
 }
 render(){
  return(
            {this.state.serverResponse}
       );
 }}