javascript - 如何修复 Youtube Data API v3 Required Parameter : part in Axios request and React. js

Question

我正在尝试使用 Youtube Data API v3 运行一些查询，它应该从 Youtube API 返回一些视频，但我收到“必需参数:部分”的错误

我尝试在 Postman 上使用相同的键值对发出相同的请求 (GET)，它在 Postman 中工作得很好，但在我的 React 和 Axios 应用程序中却没有，它会出现此错误:

{error: {errors: [,…], code: 400, message: "Required parameter: part"}}
error: {errors: [,…], code: 400, message: "Required parameter: part"}
code: 400
errors: [,…]
0: {domain: "global", reason: "required", message: "Required parameter: part", locationType: "parameter",…}
domain: "global"
location: "part"
locationType: "parameter"
message: "Required parameter: part"
reason: "required"
message: "Required parameter: part"

import axios from 'axios';

const KEY = 'AIzaSyAL9jCDWvRD2G5nUgBrLEgEhZTQsRvzt80';

export default axios.create({
  baseURL: 'https://www.googleapis.com/youtube/v3',
  params: {
    part: 'snippet',
    maxResults: 5,
    key: KEY
  }
});

和我的 App 组件:

import React from 'react';
import SearchBar from './SearchBar';
import youtube from '../components/apis/youtube';

class App extends React.Component {

  onTermSubmit = (term) => {
    youtube.get('/search', {
      params: {
        q: term
      }
    });
  }
  render() {
    return (
      <div className="ui container">
        <SearchBar onFormSubmit={this.onTermSubmit} />
      </div>
    )
  }
}

export default App;

Answer 1

这是因为您正在覆盖 App 组件中的 params。

参见 codesandbox here , 和下面的代码。

您可以执行以下操作:

import axios from "axios";
const KEY = "AIzaSyAL9jCDWvRD2G5nUgBrLEgEhZTQsRvzt80";

export const baseParams = {
  part: "snippet",
  maxResults: 5,
  key: KEY
};

export default axios.create({
  baseURL: "https://www.googleapis.com/youtube/v3"
});

然后是你的 react 组件

import React from 'react';
import SearchBar from './SearchBar';
import youtube, { baseParams } from '../components/apis/youtube';

class App extends React.Component {

  onTermSubmit = (term) => {
    youtube.get('/search', {
      params: {
        ...baseParams,
        q: term
      }
    });
  }
  render() {
    return (
      <div className="ui container">
        <SearchBar onFormSubmit={this.onTermSubmit} />
      </div>
    )
  }
}

export default App;