在 react-native 中使用 fetch polyfill 将数据作为键值对发送

Question

以下代码是使用 fetch polyfill 发出 HTTP POST 请求：

fetch(url, {
  method: 'post',
  body: JSON.stringify({
    token: this.state.token,
  }),
})
  .then((response) => response.json())
  .then((responseData) => {
    console.log(responseData);
  })
  .done();

此请求将数据作为字符串化 JSON obj 发送。有没有办法像请求一样将数据作为键值对发送？ post(URL, data=payload) 在 python.

Answer 1

当然可以。查看 github 中的 fetch 文档：https://github.com/github/fetch

它使用 document/DOM web，但对于 react-native 情况应该是相同的 - 只需使用 FormData 对象并附加所有要发送的表单字段。

var form = document.querySelector('form')

fetch('/users', {
  method: 'post',
  body: new FormData(form)
})

并且：

var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

fetch('/avatars', {
  method: 'post',
  body: data
})

Answer 2

听起来你想要与查询字符串相同的格式，所以 import/require 一个像 https://www.npmjs.com/package/query-string 这样的包似乎不依赖于任何浏览器功能并且有一个 stringify 方法：

queryString.stringify({
  foo: 'bar',
  nested: JSON.stringify({
    unicorn: 'cake',
  }),
});

//=> foo=bar&nested=%7B%22unicorn%22%3A%22cake%22%7D

或者你可以只使用其源代码的相关部分，尽管这仍然会受到 its license:

function toQueryString(obj) {
  return obj
    ? Object.keys(obj)
        .sort()
        .map(function (key) {
          var val = obj[key];

          if (Array.isArray(val)) {
            return val
              .sort()
              .map(function (val2) {
                return encodeURIComponent(key) + '=' + encodeURIComponent(val2);
              })
              .join('&');
          }

          return encodeURIComponent(key) + '=' + encodeURIComponent(val);
        })
        .join('&')
    : '';
}

然后您可以在 fetch 中的 body 参数中使用 return 值：

fetch(url, {
  method: 'post',
  body: toQueryString({ token: this.state.token }),
});

在 react-native 中使用 fetch polyfill 将数据作为键值对发送

Sending data as key-value pair using fetch polyfill in react-native

http

react-native

fetch-api