Статья на BigDevOps

Как передать ключ API с запросом в этот запрос GET в React с использованием axios для API-поиска Bing

Для того чтобы передать ключ API с запросом GET в React при использовании axios для API-поиска Bing, необходимо следовать определенным шагам.

  1. Получите ключ API от Bing Developer Center. Вы можете зарегистрироваться на сайте Bing Developer Center и создать свой собственный ключ API для доступа к поисковому API Bing.

  2. Установите axios в свой проект React, если он еще не установлен. Вы можете установить axios, выполнив следующую команду в терминале вашего проекта:

npm install axios
  1. Создайте компонент React, который будет выполнять запрос к API Bing. Например, вы можете создать компонент SearchBar, который будет содержать текстовое поле для ввода запроса.
import React, { useState } from 'react';
import axios from 'axios';

const SearchBar = () => {
  const [query, setQuery] = useState('');

  const search = async () => {
    const apiKey = 'YOUR_API_KEY_HERE';
    const url = `https://api.cognitive.microsoft.com/bing/v7.0/search?q=${query}`;

    try {
      const response = await axios.get(url, {
        headers: {
          'Ocp-Apim-Subscription-Key': apiKey
        }
      });

      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Enter search query"
      />
      <button onClick={search}>Search</button>
    </div>
  );
};

export default SearchBar;
  1. Замените YOUR_API_KEY_HERE на фактический ключ API, который вы получили от Bing Developer Center.

  2. Теперь, когда вы отправляете запрос с помощью метода search, ваш запрос будет содержать ключ API, передаваемый в заголовке Ocp-Apim-Subscription-Key.

Это и есть способ передачи ключа API с запросом GET в React при использовании axios для API-поиска Bing. Не забудьте подставить реальный ключ API и наслаждайтесь поиском с помощью Bing!