Question

我正在尝试向我的youtube api发出GET请求，即使我包含了“ part”，我也将其取回：

"code": 400, "message": "Required parameter: part"

，然后从“网络”标签中：

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

谁能帮我弄清楚我在这里做错了什么？

这是我的文件：

youtube.js

const KEY = "my api key";

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

我的应用程序：

class App extends React.Component {
  state = {};

  onSearchSubmit = term => {
    const x = youtube.get("/search", {
      params: {
        q: term
      }
    });
    console.log(x);
  };

  render() {
    return (
      <div className='ui container'>
        <SearchBar onFormSubmit={this.onSearchSubmit} />
      </div>
    );
  }
}

最后是我的SearchBar.js：

class SearchBar extends React.Component {
  state = { term: "" };

  onInputChange = event => {
    this.setState({ term: event.target.value });
  };

  onformSubmit = event => {
    event.preventDefault();
    this.props.onFormSubmit(this.state.term);
  };

  render() {
    return (
      <div className='ui segment search-bar'>
        <form onSubmit={this.onformSubmit} action='' className='ui form'>
          <div className='field'>
            <label htmlFor=''>Video Search</label>
            <input
              value={this.state.term}
              type='text'
              onChange={this.onInputChange}
            />
          </div>
        </form>
      </div>
    );
  }
}

一直想弄清楚它没有任何运气。（我知道我没有保存获取响应，我只是想先测试GET，然后再执行此操作。）

Axios-0.18

谢谢!!!

Answer 1

原因：覆盖参数

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

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



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

    class App extends React.Component {
      state = {};

      onSearchSubmit = term => {
        const x = youtube.get("/search", {
          params: {
          ...baseParams,
            q: term
          }
        });
        console.log(x);
      };

      render() {
        return (
          <div className='ui container'>
            <SearchBar onFormSubmit={this.onSearchSubmit} />
          </div>
        );

忽略以下内容，因为您最初错误地添加了数据。

在Youtube.js的param部分中删除数据，它将起作用。

const KEY = "my api key";

export default axios.create({
  baseURL: "https://www.googleapis.com/youtube/v3",
  params: {

      part: "snippet",
      maxResults: 5,
      key: KEY

  }

});

Answer 2

Axios v0.20.0 版本解决了这个问题，该问题已于去年夏天发布。

问题是 v0.19.0 存在一个错误，无法合并来自配置实例的参数。这将导致 400 错误失败并显示消息“必需参数：零件”。所以你可以通过几种方式来处理它。

npm install axios@0.20.0
按照@Anilm 给出的答案，将 params 对象移除到其他地方，例如您的 onSearchSubmit。

React / Axios-“代码”：400，“消息”：“必需参数：部分”

2 个答案: