我试图在React Native中使用fetch从Product Hunt API中获取信息.我已经获得了正确的访问令牌,并将其保存到State,但似乎无法在GET请求的授权标头中传递它.

以下是我目前掌握的情况:

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();
  },

我对代码的期望如下:

  1. 首先,我将使用导入的API模块中的数据创建一个访问令牌
  2. 之后,我将this.stateclientToken属性设置为等于接收到的访问令牌.
  3. 然后,我将运行getPosts,它将返回一个包含Product Hunt当前帖子数组的响应.

我能够验证是否正在接收访问令牌,以及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'
  })
}

React-native相关问答推荐

收到错误Constants.platform.ios.model已被弃用,以支持 expo-device

使用 Auth Token 标头react 本机图像,如何处理 401?

如何在react-native 的switch 内显示文本(是/否)

React-Native:无法从我的 android 应用程序打开设备设置

React Native 上传到 S3 存储空间

在 React Native 中计算两个 lat+lng 坐标之间的距离?

React-native 解码 base64 编码字符串

使用 react-native 设置 Select 器的高度

如何在 React Native cli 中获取 SHA-1 密钥?

如何解决此错误您可能需要适当的加载程序来处理此文件类型

是否可以在 react-native 的构造函数中调用异步函数?

无法识别的 WebSocket 连接选项 `agent`、`perMessageDeflate`、`pfx`、`key`、`passphrase`... 你的意思是把这些放在 `headers` 下吗?

React Native - Firebase 身份验证持久性不起作用

在 FlatList 上使用 React Native 搜索过滤器

如何用 Realm 元素文件组织 React Native?

使用 React Native 运行 Firebase 3.0 时出错

当前未启用语法nullishCoalescingOperator

为什么 this.state 在react-native中未定义?

在 react-native 中使用捏拉zoom 的可滚动图像

如何在 React Native 中强制禁用 iOS 暗模式