typescript react-native를 사용하여 fetch api에 헤더를 추가할 수 없습니다.

typescript react-native를 사용하여 fetch api에 헤더를 추가할 수 없습니다.

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

여기에 헤더를 추가하려면 어떻게 해야 하나요?왜냐하면 나는 이것을 실현시킬 방법을 찾을 수 없고 무엇이 문제인지 모르기 때문이다.우편배달부에서 테스트하면 200개의 응답이 있고, 401개의 응답이 있습니다.이 라이브러리도 커스텀헤더를 추가하기 위해 시도했습니다.https://www.npmjs.com/package/fetch-headers

사용방법: Visual Studio 코드 1.81.1 "react-native" : 0.50.0, "typescript" : 2.6.1

라고 입력해 주세요.HeadersInit?

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

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

그렇지 않은 경우 Headers() 컨스트럭터를 사용하여 시작할 때 발생하는 오류를 질문에서 보여 줄 수 있습니까?

빌드에 포함된 TypeScript 라이브러리는 무엇입니까?그 정의와 비슷할 것 같습니다.headers속성이 잘못되었습니다.TypeScript 2.6.2에서는headers속성이 유형입니다.HeadersInit다음과 같이 정의됩니다.type HeadersInit = Headers | string[][] | { [key: string]: string };

나는 수입으로 문제를 해결했다.Headers다음과 같습니다.

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

승인된 답변에는 다음과 같은 주의사항이 포함되어 있습니다.이 답변에서는 캡슐화 시나리오가 처리되지 않습니다.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그러나 호출 함수에 의해 전달된 헤더를 사용하고 있기 때문에, 이러한 여러 타입에 대응할 필요가 있기 때문에, 문제가 발생합니다.

내가 완전히 화가 나서 결심한 것은 내 자신의 것을 정의하는 것이다.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)
  // ...
}

저는 이 문제를 다음과 같이 해결했습니다.

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

JS는 구문을 올바르게 해석하고 typescript만 해석하지 않기 때문에 이 에러 메시지를 무시하기만 하면 됩니다.이 두 문자열을 저장하는 변수를 작성했습니다.

언급URL : https://stackoverflow.com/questions/47754183/typescript-cannot-add-headers-to-a-fetch-api-using-react-native