Использование Async / Await при вызове методов импортированных классов

Question

Используя вызовы React и API, Я разделил выборку API для другого класса. Цель - создать после этого экземпляр класса API для вызова метода "api_call ()" который выбирает данные. Данные затем сохраняются в объекте экземпляра, и Я бы затем взял эти данные и изменил бы состояние реагирования на основе любых данных.

Тем не менее, важная часть - , ожидающая получения ответа , но я не уверен, где это реализовать. Будете ли вы реализовать асинхронное ожидание внутри методов в классе API? или вы бы реализовали асинхронное ожидание, откуда вы вызываете метод api_call в классе React?

Класс реагирования

API obj создается, и процесс извлечения называется

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
    }
  }

  componentDidMount(){
    var RESTAPI = new API();
    RESTAPI.api_call();
    console.log(RESTAPI.infomation);
  }
 }

Класс API

class API {
  constructor(){
    this.url = "https://restcountries.eu/rest/v2/all";
    this.data = null;
    this.information = null;
  }

  api_call(){    
    fetch(this.url)
    .then((response) => response.json())
    .then(function(data){
      this.data = data;
      this.api_sort();
    }.bind(this))
  }

  api_sort(){    
    var infoObj = {
      name: this.data[0].name
    }

    this.information = infoObj;
  }
}

Answer 1

Сначала я не использовал бы класс для API, у него действительно нет экземпляров, поэтому он может быть:

 function getData(url) {
   let response;
   return function() {
     if(response) return response;
     return response = fetch(url)
        .then(res => res.json())
        .then(res => res.data);
   };
}

 const API = {
  all: getData("https://restcountries.eu/rest/v2/all"),
  //...
 }

Тогда внутри компонента вы можете ожидать ответа:

 async componentDidMount() {
   const { 0: {name} } = await API.all();
   this.setState({ name });
 }

Тогда вы можете использовать name внутри компонента.

Answer 2

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

Вызов API и сортировка

Класс API

const values = {
    url: "https://restcountries.eu/rest/v2/all"
};

const api = {
    call: async function(url = null){    
        try{
            if(url === null){
                url = values.url;
            }

            let response = await fetch(url, options);
            let responseOK = response && response.ok;
            if (responseOK) {
                let data = await response.json();
                return api.sort(data);
            } else {
                // handle response not ok
            }
        } catch(e){
            // handle promise errors
        }
    },

    sort: function(data){
        // return sorted data
    }
}

export default api;

Класс реагирования импортировать api из 'api.js';

class App extends Component {
    constructor(props){
        super(props);

        this.state = {
        }
    }

    async componentDidMount() {
        let result = await api.call(); // or api.call(someUrl)
        // do something with result
    }
}

Сортировка после вызова API только при необходимости

С этим решением вы также можете отделить вызов API от сортировки данных, например:

Класс API

const values = {
    url: "https://restcountries.eu/rest/v2/all"
};

const api = {
    call: async function(url = null){    
        try{
            if(url === null){
                url = values.url;
            }

            let response = await fetch(url, options);
            let responseOK = response && response.ok;
            if (responseOK) {
                return await response.json();
            } else {
                // handle response not ok
            }
        } catch(e){
            // handle promise errors
        }
    },

    sort: function(data){
        // return sorted data
    }
}

export default api;

Класс реагирования импортировать api из 'api.js';

class App extends Component {
    constructor(props){
        super(props);

        this.state = {
            sort: true,
        }
    }

    async componentDidMount() {
        let result = await api.call(); // or api.call(someUrl)
        // do something with result
        // sort if necessary
        let sortedResult = api.sort(result);
        // do something with sortedResult
    }
}

Вы также можете использовать Axios , как видно из этого ответа .

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

Answer 3

api_call уже создает обещание, просто верните это обещание

api_call(){    
  return fetch(this.url) // <--- added return statement
   .then((response) => response.json())
   .then(function(data){
     this.data = data;
     this.api_sort();
   }.bind(this))
 }

А затем дождитесь, пока это обещание разрешится:

async componentDidMount(){
  const RESTAPI = new API();
  await RESTAPI.api_call();
  console.log(RESTAPI.infomation);
}

---

Кроме того, вам следует подумать о том, чтобы выполнить обещание с соответствующими данными, а не с неопределенным.

api_call(){    
  return fetch(this.url)
   .then((response) => response.json())
   .then((data) => { // <-- changed to arrow function, so there's no need to bind
     this.data = data;
     this.api_sort();
     return this.information; // <--- added return statement
   })
 }

Тогда вы можете ждать это так:

async componentDidMount(){
  const RESTAPI = new API();
  const information = await RESTAPI.api_call();
  console.log(information)
}