Comment utiliser Fetch pour envoyer des requêtes réseau dans React Native

Cet article présente principalement l'exemple de code de React Native utilisant Fetch pour envoyer des requêtes réseau. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Nous utilisons souvent HTTP dans nos projets Demande d'accès au réseau. Les requêtes HTTP (HTTPS) sont généralement divisées en « GET », « PUT », « POST » et « DELETE ». Si elles ne sont pas spécifiées, la valeur par défaut est GET.

Dans les projets, nous utilisons généralement deux méthodes de requête : GET et POST. Pour soumettre de telles requêtes dans des formulaires avec des paramètres, nous utilisons généralement la méthode de requête POST.

Afin d'effectuer des requêtes HTTP, nous devons utiliser l'API Fetch fournie par React Native pour l'implémentation. Pour obtenir du contenu à partir de n'importe quelle adresse, transmettez simplement l'URL en tant que paramètre à la méthode fetch (le mot fetch lui-même signifie get

GET

Si vous souhaitez demander des données via la méthode GET et convertissez-la en JSON, vous pouvez le faire via le code suivant :

fetch('https://facebook.github.io/react-native/movies.json')
   .then((response) => response.json())
   .then((responseJson) => {
    return responseJson.movies;
   })
   .catch((error) => {
    console.error(error);
   });

Convertissez la réponse renvoyée en un objet JSON via la requête ci-dessus, puis supprimez le champ Films de l'objet JSON . En même temps, si une erreur se produit, telle qu'une panne de réseau ou une erreur de connexion d'accès, ce sera .catch. Dans des circonstances normales, nous pouvons obtenir les résultats suivants :

{
 "title": "The Basics - Networking",
 "description": "Your app fetched this from a remote endpoint!",
 "movies": [
  { "title": "Star Wars", "releaseYear": "1977"},
  { "title": "Back to the Future", "releaseYear": "1985"},
  { "title": "The Matrix", "releaseYear": "1999"},
  { "title": "Inception", "releaseYear": "2010"},
  { "title": "Interstellar", "releaseYear": "2014"}
 ]
}

POST. (un)

Bien sûr, la requête GET ci-dessus est la plus basique. Elle comporte également un deuxième paramètre facultatif, qui peut être utilisé pour personnaliser certains paramètres de la requête HTTP. Vous pouvez spécifier les en-têtes. paramètres, ou spécifiez l'utilisation de la méthode POST, ou la soumission de données, etc. : l'API Fetch prend également en charge la personnalisation des en-têtes, la modification de la méthode, l'ajout de corps, etc.

let url = "http://www.yousite.com/xxxx.ashx” 
let params = {"name":"admin","password":"admin"}; 
fetch(url, {
 method: 'POST',
 headers: {
  'Accept': 'application/json',
  'Content-Type': 'application/json',
 },
 body: JSON.stringify(params)
})

Ce qui précède construit une requête POST de base et ajoute ses propres en-têtes : Accept et Content-Type, ajoutés

POST (2)

let url = "http://www.yousite.com/xxxx.ashx”; 
let params = "username=admin&password=admin”; 
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: params,
}).then((response) => {
  if (response.ok) {
    return response.json();
  }
}).then((json) => {
  console.log(json)
}).catch((error) => {
  console.error(error);
});

POST (3) recommandé

<.>Grâce aux deux méthodes ci-dessus, nous avons un autre moyen d'envoyer une requête POST. Bien sûr, cette méthode est également recommandée

Si votre serveur ne reconnaît pas le format de données POST ci-dessus, vous pouvez essayer le. format de formulaire traditionnel, l'exemple est le suivant :

let REQUEST_URL = 'http://www.yousite.com/xxxx.ashx';

// `首先我们需要自己创建一个FormData，来存请求参数`

let parameters = new FormData();
parameters.append("mt", "30013");
parameters.append("pg", "1");
parameters.append('ps', '20');


fetch(REQUEST_URL, {
  method: 'POST',
  body: parameters
}).then(
  (result) => {
    if (result.ok) {
      console.log(result)
      result.json().then(
        (obj) => {
          console.log(obj)
        }
      )
    }
  }
).catch((error) => {
  console.log(error)
  Alert.alert('Error')
})

Un autre avantage de recommander cette méthode est que vous pouvez transmettre directement le flux d'octets dans FormData pour implémenter la fonction de téléchargement d'images. suit :

uploadImage(){ 
 let formData = new FormData(); 
 let file = {uri: uri, type: 'multipart/form-data', name: 'a.jpg'}; 

 formData.append("images",file); 

 fetch(url,{ 
  method:'POST', 
  headers:{ 
    'Content-Type':'multipart/form-data', 
  }, 
  body:formData, 
 }) 
 .then((response) => response.text() ) 
 .then((responseData)=>{ 

  console.log('responseData',responseData); 
 }) 
 .catch((error)=>{console.error('error',error)}); 

}

Traitement des données de réponse du serveur

L'exemple ci-dessus montre comment lancer une requête Dans de nombreux cas, vous devez également traiter la réponse du serveur. data.

Les requêtes réseau sont naturelles. Une opération asynchrone, la méthode Fetch renverra une promesse. Ce mode peut simplifier le code de style asynchrone, veuillez vous référer à : Promise

Traite les données renvoyées par le. serveur. Nous avons déjà effectué les deuxième et troisième étapes ci-dessus. Le traitement des données est implémenté dans trois requêtes POST. Pour les codes spécifiques, veuillez vous référer au code d'implémentation ci-dessus

Par défaut, iOS bloquera toutes les requêtes non https. demandes, alors vous devez d'abord ajouter une exception pour App Transport Security

Ce qui précède est ce que j'ai compilé pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter le flux sur knockoutjs

Comment utiliser vue pour implémenter des composants de défilement transparent

Difficultés dans les opérations sur les tableaux JavaScript (tutoriel détaillé)

Comment implémenter la fonction similaire dans le mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!