Используйте Async с обещанием .then - PullRequest
Новая
       23

Используйте Async с обещанием .then

1 голос
/ 08 июля 2019

Здравствуйте, после установки простая асинхронная функция с возвращением обещания, которую я хотел бы использовать, затем обещание вместо попытки! Но возвращается

жду зарезервированное слово

для второго ожидания в функции.

Я пытался разместить асинхронное возвращение, обещая данные! но не сработало 

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 - зарезервированное слово (100: 25) let auth_token = await AsyncStorage.getItem (AUTH_TOKEN); ^ fetch ("/ notifications / mark_as_read", {

1 Ответ

2 голосов
/ 08 июля 2019

Вы должны рефакторинг, как вы делаете ваши запросы.У меня была бы общая функция, чтобы обработать настройку запроса и все.

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 - это небольшая вспомогательная утилита для получения параметров get qs в 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()}`
}

Теперь, чтобы узнать, как обновить код, вы заметите,вещи становятся менее многословными и более обширными. 

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
  }
}
...