typescript 无法使用 react-native 将 headers 添加到提取 api

Question

我正在使用 Fetch API from react-native 并且我正在使用 typescript。我的代码如下所示：

let responseLogin = await fetch('http://url_example', {
        method: 'POST',
        headers: {'Content-Type':'application/json'},
        body: requestBody
    });

但我在 header 处出现以下错误：

 Argument of type '{ method: string; headers: { 'Content-Type': string; }; body: string; }' is not assignable to parameter of type 'RequestInit'.
  Types of property 'headers' are incompatible.
    Type '{ 'Content-Type': string; }' is not assignable to type 'Headers | string[][]'.
      Object literal may only specify known properties, and ''Content-Type'' does not exist in type 'Headers | string[][]'.

我也试过创建自定义 header 但没有成功：

    let requestHeaders = new Headers();
        requestHeaders.set('Content-Type', 'application/json');
        // I have also tried adding this at the end but no luck 
        // requestHeaders.get('Content-Type');

如何向其中添加 header？因为我找不到任何方法来实现这一点，而且我不知道问题出在哪里。如果我在邮递员中测试这些，我会得到 200 响应，在这里我会得到 401 响应。我也试过这个库只是为了添加自定义 headers: https://www.npmjs.com/package/fetch-headers

我使用： Visual studio 代码 1.81.1 "react-native": "0.50.0", "typescript": "2.6.1"

Answer 1

您的构建中包含哪些 TypeScript 库？看起来您对 headers 属性的定义是错误的。在 TypeScript 2.6.2 中，headers 属性是 HeadersInit 类型，定义为： type HeadersInit = Headers | string[][] | { [key: string]: string };

Answer 2

我已经解决了这样的问题：

let requestHeaders: any = { 'Content-Type': 'application/json' };
let responseLogin = await fetch('URL', {
  method: 'POST',
  headers: requestHeaders,
  body: requestBody
});

我所要做的就是忽略该错误消息，因为 JS 正确地解释了语法，只有 typescript 没有，我通过创建一个变量来存储这两个字符串来做到这一点。

Answer 3

你能试着输入 HeadersInit 吗？

const requestHeaders: HeadersInit = new Headers();
requestHeaders.set('Content-Type', 'application/json');

const responseLogin = await fetch('URL', {
  method: 'POST',
  headers: requestHeaders,
  body: requestBody
});

如果不是，您能否显示您在使用 Headers() 构造函数启动它时遇到的错误，您在问题中已显示？

Answer 4

我解决了导入的问题，像这样

从 'node-fetch' 导入提取，{Headers}；

Answer 5

接受的答案有一个警告，即它不处理将 fetch 封装到您自己的函数中的情况，该函数接收与 fetch 相同的参数并将默认值设置为 headers 属性。例如：

async function myFetch(input: RequestInfo, init: RequestInit) {
  // set some headers here
  const res = await fetch(input, init)
  // return something from the response here, handle errors
}

已解决答案的问题是 RequestInit.headers 属于 HeadersInit 类型，其定义为：

type HeadersInit = string[][] | Record<string, string> | Headers;

当我尝试为 headers 设置默认值但仍然使用调用函数传递的 headers 时，我运行遇到了问题，因为我需要处理这些可能的多种类型与.

我完全恼怒的解决办法是定义我自己的 RequestInit 类型，其中 headers 只是 Record<string, string>。我不关心其他类型，字符串 key/values 的 object 没问题。



export interface MyRequestInit extends Omit<RequestInit, 'headers'> {
  headers?: Record<string, string>;
}

export async function fetchJson<JSON = unknown>(
  input: RequestInfo,
  init: MyRequestInit = {},
) {
  // set my own default headers here
  const res = await fetch(input, init)
  // ...
}

typescript 无法使用 react-native 将 headers 添加到提取 api

typescript Cannot add headers to a fetch api using react-native

json

typescript

react-native

fetch-api