async/await

example1.js

// Basic example, working with an API
async function getData() {
	try {
		let response = await fetch(`${API_URL}/products`)
		let products = await response.json()
		console.log(products)
	} catch(e) {
		console.log(e)
	}
}

// Slow example grabbing two endpoints (with axios)
const getDetails = async function () {
  try {
    // First call comes first
    const jon = await axios.get('https://api.github.com/users/jonleopard');
    // then we wait for second call...slow
    const brent = await axios.get('https://api.github.com/users/jxnblk');
  } catch (error) {
    console.log(error);
  }
  const html = `
    <h1>${jon.name}</h1>
    <h1>${brent.name}</h1>
  `;
}

// Slow example grabbing two endpoints (with axios)
const getDetails = async function () {
  try {
    // Fire both off at the same time
    const jon = await axios.get('https://api.github.com/users/jonleopard'); 
    const brent = await axios.get('https://api.github.com/users/jxnblk');
    // and wait for both to come back
    const [jon, brent] = await Promise.all([jonPromise, brentPromise]);
  } catch (error) {
    console.log(error);
  }
  const html = `
    <h1>${jon.name}</h1>
    <h1>${brent.name}</h1>
  `;
}


// HOC Error Handling
async function yolo() {
  // do something that errors out
  const jon = await axios.get('https://no.com')
}

// max a function to handle that error
function handleError(fn) {
  return function (...params) {
    return fn(...params).catch(function (err) {
      // do something with the error!
      console.log(`Oops!`, err);
    });
  }
}

// Do it in ES6
const handleError = fn => (params) => fn(...params).catch(console.error);

const safeYolo = handleError(yolo);
safeYolo();



// Write your APIs in promises
// Use async + await for flow control
// Convert older APIs with Promisify

reactFetch.js

class App extends React.Component {
  state = {
    loading: false,
    error: null,
    example: undefined,
  }
  
  getExample = async (e) => {
    e.preventDefault();
    const example = e.target.items.example.value
    const api_call = await fetch(`${API_URL}/endpoint`)
    const data = await api_call.json(); 
  }
  
  if(example) ({
    this.setState({
      example: data.example
      loading: false,
    });
  } else {
    this.setState({
      error: error.errorMessage,
      loadingL false,
    });
  }

}