{"componentChunkName":"component---src-templates-docs-js","path":"/docs/faq-ajax.html","result":{"data":{"markdownRemark":{"html":"

Як виконати AJAX-запит до сервера?

\n

Ви можете використовувати вбудований в браузер метод window.fetch, або будь-яку AJAX-бібліотеку, наприклад Axios чи jQuery AJAX.

\n

Де в життєвому циклі компонента краще робити запит?

\n

Ви можете зробити AJAX-запит в componentDidMount. Коли ви отримаєте дані, викличте setState, щоб передати їх компоненту.

\n

Приклад: Встановлюємо стан з AJAX-запиту

\n

Компонент нижче показує, як в componentDidMount задати внутрішній стан з результату AJAX-запиту.

\n

Припустимо, наш API повертає наступний JSON-об’єкт:

\n
{\n  "items": [\n    { "id": 1, "name": "Яблука",  "price": "$2" },\n    { "id": 2, "name": "Персики", "price": "$5" }\n  ] \n}
\n
class MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      error: null,\n      isLoaded: false,\n      items: []\n    };\n  }\n\n  componentDidMount() {\n    fetch(\"https://api.example.com/items\")\n      .then(res => res.json())\n      .then(\n        (result) => {\n          this.setState({\n            isLoaded: true,\n            items: result.items\n          });\n        },\n        // Примітка: важливо обробляти помилки саме тут,\n        // а не в блоці catch (), щоб не перехоплювати\n        // виключення з помилок в самих компонентах.\n        (error) => {\n          this.setState({\n            isLoaded: true,\n            error\n          });\n        }\n      )\n  }\n\n  render() {\n    const { error, isLoaded, items } = this.state;\n    if (error) {\n      return <div>Помилка: {error.message}</div>;\n    } else if (!isLoaded) {\n      return <div>Завантаження...</div>;\n    } else {\n      return (\n        <ul>\n          {items.map(item => (\n            <li key={item.name}>\n              {item.name} {item.price}\n            </li>\n          ))}\n        </ul>\n      );\n    }\n  }\n}
\n

Here is the equivalent with Hooks:

\n
function MyComponent() {\n  const [error, setError] = useState(null);\n  const [isLoaded, setIsLoaded] = useState(false);\n  const [items, setItems] = useState([]);\n\n  // Note: the empty deps array [] means\n  // this useEffect will run once\n  // similar to componentDidMount()\n  useEffect(() => {\n    fetch(\"https://api.example.com/items\")\n      .then(res => res.json())\n      .then(\n        (result) => {\n          setIsLoaded(true);\n          setItems(result.items);\n        },\n        // Note: it's important to handle errors here\n        // instead of a catch() block so that we don't swallow\n        // exceptions from actual bugs in components.\n        (error) => {\n          setIsLoaded(true);\n          setError(error);\n        }\n      )\n  }, [])\n\n  if (error) {\n    return <div>Error: {error.message}</div>;\n  } else if (!isLoaded) {\n    return <div>Loading...</div>;\n  } else {\n    return (\n      <ul>\n        {items.map(item => (\n          <li key={item.name}>\n            {item.name} {item.price}\n          </li>\n        ))}\n      </ul>\n    );\n  }\n}
","frontmatter":{"title":"AJAX та запити до API","next":null,"prev":null},"fields":{"path":"content/docs/faq-ajax.md","slug":"docs/faq-ajax.html"}}},"pageContext":{"slug":"docs/faq-ajax.html"}},"staticQueryHashes":[]}