javascript - 如何修复 Youtube Data API v3 所需参数:Axios 请求和 React.js 中的一部分
问题描述
我正在尝试使用 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;
解决方案
这是因为您正在覆盖您params
的App
组件。
请参阅此处的代码框和下面的代码。
您可以执行以下操作:
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"
});
然后你的反应组件
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;
推荐阅读
- javascript - 为什么模态呈现在表格下方?
- ios - 我没有在我的 iOS 设备上收到 Firebase 通知
- java - MongoDB:将新对象推送到数组并返回相同的对象
- java - Java 8 流分组按属性忽略大小写敏感
- javascript - Javascript:使用 querySelectorAll() 重新分配数组值更新失败
- javascript - 从服务器获取对象的请求
- python - 如何在未连接到互联网时缓存 Pytorch 模型以供使用?
- python-3.x - Tkinter,python 3.8.1,win10Pro,如何更改标签图像?
- python - python中分数的余数
- kubeflow - UI 可以在 kubeflow-pipelines 中显示不是 PipelineParam 的输入参数吗?