React+Axios调用Youtube V3 API返回无关搜索结果问题

核心错误是Axios GET请求的参数传递格式不符合规范，q搜索关键词并未被作为URL查询参数发送给Youtube Data API接口：

• Axios get方法的第二个参数是完整请求配置对象，只有写在配置对象params字段下的键值对，才会被自动序列化为查询参数拼接在请求URL中
• 你直接将{ q: term }作为第二个参数传入，Axios仅会将该对象挂载到响应的config属性上（也就是你在响应结果里看到q参数的原因），但不会将其作为请求参数发送
• Youtube Data API的/search接口在未接收到q参数时，会默认返回请求对应地区的热门内容，也就是你看到的固定西班牙热门音乐列表，和你传入的搜索词无关。

修改搜索请求的传参结构，将q参数放入配置对象的params字段内，修改后的请求代码如下：

onTermSubmit = term => {
        return youtube.get('/search', {
            params: { q: term }
        })
            .then(res => {
                this.setState({ selectedVideo: null });
                console.log(res);
                this.setState({ videos: res.data.items });
            })
            .catch(err => console.log(err));
    };

修改完成后可通过浏览器开发者工具的网络面板验证：查看/search请求的真实请求地址，能看到URL末尾拼接了&q=你输入的搜索关键词，此时接口会正常返回匹配关键词的搜索结果。
你之前创建的Axios实例预设参数不需要修改，实例上配置的params会和单次请求传入的params自动合并，不会出现参数覆盖问题。

内容的提问来源于stack exchange，提问作者Martin Carre