我正在尝试fetch在 React Native 中使用从 Product Hunt API 中获取信息。我已经获得了正确的访问令牌并将其保存到状态,但似乎无法在 GET 请求的授权标头中传递它。
fetch
这是我到目前为止所拥有的:
var Products = React.createClass({ getInitialState: function() { return { clientToken: false, loaded: false } }, componentWillMount: function () { fetch(api.token.link, api.token.object) .then((response) => response.json()) .then((responseData) => { console.log(responseData); this.setState({ clientToken: responseData.access_token, }); }) .then(() => { this.getPosts(); }) .done(); }, getPosts: function() { var obj = { link: 'https://api.producthunt.com/v1/posts', object: { method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + this.state.clientToken, 'Host': 'api.producthunt.com' } } } fetch(api.posts.link, obj) .then((response) => response.json()) .then((responseData) => { console.log(responseData); }) .done(); },
我对代码的期望如下:
clientToken
this.state
getPosts
我能够验证正在接收访问令牌并将this.state其作为其clientToken属性接收。我还能够验证getPosts正在运行。
我收到的错误如下:
{“error”:”unauthorized_oauth”, “error_description”:”请提供有效的访问令牌。有关如何授权 api 请求,请参阅我们的 api 文档。还请确保您需要正确的范围。例如 "private public\ ” 用于访问私有端点。”}
我一直在假设我没有在我的授权标头中正确传递访问令牌,但似乎无法弄清楚究竟是为什么。
事实证明,我使用的fetch方法不正确。
fetch需要两个参数:API 的端点,以及可以包含正文和标头的可选对象。
我将预期的对象包装在第二个对象中,这没有给我任何想要的结果。
这是它在高层次上的样子:
fetch('API_ENDPOINT', OBJECT) .then(function(res) { return res.json(); }) .then(function(resJson) { return resJson; })
我这样构造我的对象:
var obj = { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Origin': '', 'Host': 'api.producthunt.com' }, body: JSON.stringify({ 'client_id': '(API KEY)', 'client_secret': '(API SECRET)', 'grant_type': 'client_credentials' }) }