Use Async with .then promise

Question

Hello after setup a simple async function with promise return i'd like to use then promise instead of try! But is returning

await is a reserved word

for the second await in the function.

i've tried to place async return promise the data! but did not worked either

async infiniteNotification(page = 1) {
    let page = this.state.page;
    console.log("^^^^^", page);
    let auth_token = await AsyncStorage.getItem(AUTH_TOKEN);
    fetch(`/notifications?page=${page}`, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Access: auth_token
      },
      params: { page }
    })
      .then(data => data.json())
      .then(data => {

        var allData = this.state.notifications.concat(data.notifications);
        this.setState({
          notifications: allData,
          page: this.state.page + 1,

        });
        let auth_token = await AsyncStorage.getItem(AUTH_TOKEN);
          fetch("/notifications/mark_as_read", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            Access: auth_token
          },
          body: JSON.stringify({
            notification: {
              read: true
            }
          })
        }).then(response => {
          this.props.changeNotifications();
        });
      })
      .catch(err => {
        console.log(err);
      });
  }

> await is a reserved word (100:25) let auth_token = await AsyncStorage.getItem(AUTH_TOKEN); ^ fetch("/notifications/mark_as_read", {

Answer 1

You should refactor how you make your requests. I would have a common function to handle setting up the request and everything.

const makeRequest = async (url, options, auth_token) => {
  try {

    // Default options and request method
    if (!options) options = {}
    options.method = options.method || 'GET'

    // always pass a body through, handle the payload here
    if (options.body && (options.method === 'POST' || options.method === 'PUT')) {
      options.body = JSON.stringify(options.body)
    } else if (options.body) {
      url = appendQueryString(url, options.body)
      delete options.body
    }

    // setup headers
    if (!options.headers) options.headers = {}
    const headers = new Headers()
    for(const key of Object.keys(options.headers)) {
      headers.append(key, (options.headers as any)[key])
    }

    if (auth_token) {
      headers.append('Access', auth_token)
    }
    headers.append('Accept', 'application/json')
    headers.append('Content-Type', 'application/json')

    options.headers = headers

    const response = await fetch(url, options as any)
    const json = await response.json()
    if (!response.ok) {
      throw json
    }
    return json
  } catch (e) {
    console.error(e)
    throw e
  }
}

appendQueryString is a little helper util to do the get qs params in the url

const appendQueryString = (urlPath, params) => {
  const searchParams = new URLSearchParams()
  for (const key of Object.keys(params)) {
    searchParams.append(key, params[key])
  }
  return `${urlPath}?${searchParams.toString()}`
}

Now, to get to how you update your code, you'll notice things become less verbose and more extensive.

async infiniteNotification(page = 1) {
  try {
    let auth_token = await AsyncStorage.getItem(AUTH_TOKEN);
    const data = await makeRequest(
      `/notifications`,
      { body: { page } },
      auth_token
    )
    var allData = this.state.notifications.concat(data.notifications);
    this.setState({
      notifications: allData,
      page: this.state.page + 1,
    });
    const markedAsReadResponse = makeRequest(
      "/notifications/mark_as_read",
      {
        method: "POST",
        body: {
          notification: { read: true }
        },
      auth_token
    )
    this.props.changeNotifications();
  } catch (e) {
    // TODO handle your errors
  }
}