web-dev-qa-db-fra.com

dactylographié Impossible d'ajouter des en-têtes à une API de récupération à l'aide de React-Native

J'utilise Fetch API de react-native et j'utilise TypeScript. Mon code ressemble à ceci:

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

Mais j'obtiens l'erreur suivante lorsque l'en-tête est:

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

J'ai également essayé de créer un en-tête personnalisé mais sans aucune chance:

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

Comment pourrais-je ajouter un en-tête à cela? Parce que je ne trouve aucun moyen d'y arriver et je ne sais pas quel est le problème. Si je les teste dans Postman, j'obtiens une réponse 200, ici j'obtiens une réponse 401. J'ai également essayé cette bibliothèque juste pour ajouter des en-têtes personnalisés: https://www.npmjs.com/package/fetch-headers

J'utilise: Visual studio code 1.81.1 "react-native": "0.50.0", "TypeScript": "2.6.1"

jsontypescriptreact-nativefetch-api
11
P.Lorand

J'ai résolu le problème comme ceci:

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

Tout ce que j'avais à faire était d'ignorer ce message d'erreur car JS interprète correctement la syntaxe, seul TypeScript ne le fait pas et je l'ai fait en créant une variable dans laquelle j'ai stocké ces deux chaînes.

2
P.Lorand

Quelles bibliothèques TypeScript incluez-vous avec votre build? Il semble que votre définition de la propriété headers soit incorrecte. Dans TypeScript 2.6.2, la propriété headers est de type HeadersInit, qui est définie comme: type HeadersInit = Headers | string[][] | { [key: string]: string };

5
A. Goodale

Pouvez-vous essayer de le saisir comme HeadersInit?

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

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

Sinon, pouvez-vous montrer l'erreur que vous obtenez lorsque vous l'initiez avec le constructeur Headers (), que vous avez montrée dans la question?

5
Peter van Leeuwen

j'ai résolu le problème d'importation, comme ceci

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

0
Camilo Andres Perez Sanchez