установить заголовок в ответ на запрос API в componentDidMount () - PullRequest
Новая
       57

установить заголовок в ответ на запрос API в componentDidMount ()

0 голосов
/ 23 февраля 2020

Привет, поэтому проблема, с которой я борюсь, заключается в том, что у меня есть API с ключом доступа, и я не знаю, как настроить заголовок внутри компонента с помощью этого ключа доступа API, я использую API выборки случайных пользователей по умолчанию. в примере ниже, но я хочу знать, как и где я должен добавить этот заголовок с ключом доступа, заранее спасибо. 



import React from 'react';


export default class FetchRandomUser extends React.Component {



    async componentDidMount() {
        const url = "https://api.randomuser.me/"
        const response = await fetch(url)
        const data = await response.json();
        this.setState({ person: data.results[0], loading: false })
    }

    render() {
        return <div>
            {this.state.loading || !this.state.person ? (<div>Loading...</div>) : (<div>{this.state.person.name.first}</div>)}
        </div>
    }
}

Ответы [ 2 ]

1 голос
/ 23 февраля 2020 
fetch(url, {
  method: 'GET',
  headers: {
    authorization: youKEY,
  },
);
0 голосов
/ 23 февраля 2020

Так вы можете передать свой ключ API в URL https://randomapi.com/api/qcol88t8?key=TCGJ-8B0M-33L6-UX5Q; `

Код 

export default class FetchRandomUser extends React.Component {
  state = {
    loading: true,
    person: {}
  };

  async componentDidMount() {
    const url = `https://randomapi.com/api/qcol88t8?key=TCGJ-8B0M-33L6-UX5Q`;
    const response = await fetch(url);
    const data = await response.json();
    this.setState({ person: data.info, loading: false });
  }

  render() {
    return (
      <div>
        {this.state.loading || !this.state.person ? (
          <div>Loading...</div>
        ) : (
          <h2>{this.state.person.user.username}</h2>
        )}
      </div>
    );
  }
}
...