如何在 Reactjs 中使用牛津词典 API？

Question

I am a newbie at React. I am trying to build a dictionary web app. I want to use the API provided by Oxford dictionary. I have already registered for the prototype version and gathered the API_ID and API_KEY. I have tried to use the code provided by the Oxford documentation.

import './App.css';
import axios from 'axios';

function App() {

  const app_id = "******"; 
  const app_key = "****************";
  const wordId = "ace";
  const fields = "pronunciations";
  const strictMatch = "false";

  const options = {
    host: 'od-api.oxforddictionaries.com',
    port: '443',
    path: '/api/v2/entries/en-gb/' + wordId + '?fields=' + fields + '&strictMatch=' + strictMatch,
    method: "GET",
    headers: {
      'app_id': app_id,
      'app_key': app_key
    }
  };

  axios.get(options, (resp) => {
    let body = '';
    resp.on('data', (d) => {
      body += d;
    });
    resp.on('end', () => {
      let parsed = JSON.stringify(body);
      console.log(parsed);
    });
  });

  return <div>Hello world!</div>
}

export default App;

I am getting the following errors in the console when I run the app.

I am not sure what the errors mean. I want to get an object as a result in the console.

Someone kindly help me with this. If there is any more info required from my side, do ask. Thanks in advance!

Answer 1

axios.get({
  method: "get",
  url: 'od-api.oxforddictionaries.com/api/v2/entries/en-gb/' + wordId + '?fields=' + fields + '&strictMatch=' + strictMatch,,
  headers: {
  'app_id': app_id,
  'app_key': app_key
  }
})
.then(response => { // handle successful response})
.catch(error => { // handle error response})

You are using axios the wrong way. The code above should work.