typescript无法使用react-native向fetch API添加标头

whlutmcx  于 2023-06-06  发布在  React
关注(0)|答案(6)|浏览(186)

我使用的是react-native的Fetch API,我使用的是typescript。我的代码看起来像这样:

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

但我得到以下错误,其中头是:

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[][]'.

我也试过创建一个自定义头,但没有任何运气:

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');

我如何添加一个标题到这个?因为我找不到任何方法来实现这一点,我不知道是什么问题。如果我在Postman中测试这些,我得到200的响应,这里我得到401的响应。我也尝试过这个库,只是为了添加自定义头文件:https://www.npmjs.com/package/fetch-headers
我用途:Visual studio code 1.81.1“react-native”:“0.50.0”,“typescript”:“2.6.1”

pjngdqdw

pjngdqdw1#

你能试着输入HeadersInit吗?

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

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

如果没有,你能显示当你用Headers()构造函数初始化它时得到的错误吗?

yqlxgs2m

yqlxgs2m2#

你的构建中包含了哪些TypeScript库?您对headers属性的定义似乎是错误的。在TypeScript 2.6.2中,headers属性的类型为HeadersInit,定义为:type HeadersInit = Headers | string[][] | { [key: string]: string };

i86rm4rw

i86rm4rw3#

我通过像这样导入Headers解决了这个问题:

import fetch, { Headers } from 'node-fetch';
6tdlim6h

6tdlim6h4#

接受的答案有一个警告,它不能处理这样的场景,即您将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.headersHeadersInit类型,其定义是:

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

当我尝试为headers设置默认值,但仍然使用调用函数传递的头时,我遇到了问题,因为我需要处理这些可能的多个类型。
出于彻底的愤怒,我决定定义自己的RequestInit类型,其中headers只是Record<string, string>。我不关心其他类型,字符串键/值的对象很好。

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)
  // ...
}
at0kjp5o

at0kjp5o5#

我也遇到了同样的问题,但接受的答案在我的情况下不起作用,因为头可能已经被初始化了。所以呢

if (!requestInit.headers) {
      requestInit.headers = new Headers()
    }

    requestInit.headers.set('Content-Type', 'application/json')
    // *TS2339: Property 'set' does not exist on type 'HeadersInit'. Property 'set' does not exist on type 'string[][]'*

产生编译错误,因为像其他人指出的那样,HeadersInit被定义为type HeadersInit = string[][] | Record<string, string> | Headers;

修复:使用带参数的构造函数

requestInit.headers = new Headers(requestInit.headers)
requestInit.headers.set('Content-Type', 'application/json')
vyu0f0g1

vyu0f0g16#

我是这样解决这个问题的:

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

我所要做的就是忽略这个错误消息,因为JS可以正确地解释语法,只有typescript不能,我通过创建一个变量来存储这两个字符串。

相关问题