REST API est généralement utilisé pour le développement Web. Ils sont des applications Web à l'autre « parler » à l'interface de programmation. Ils sont utilisés pour accéder aux fonctions et aux membres de données. API "REST" (Representational State Transfer) est un concept attributs définis. Cet article se concentrera sur la façon d'utiliser une API basée sur le Web pour récupérer des données à partir de la base de données.
Axios NPM est un logiciel qui permet à une application envoie une requête HTTP à l'API Web. Pour utiliser Axios React dans votre application, utilisez la commande suivante:
npm install axiosou
yarn add axiosAvant de créer des composants réagissez, et Axios React s'il vous plaît importer le fichier en suivant ces étapes:
import React from 'react';
import axios from 'axios';React utilise les méthodes du cycle de vie de la demande Axios componentWillMount 'dans. Bien que cette méthode a depuis été dépassée, mais peut encore être utilisé au moment de l'écriture. Elle se poursuivra jusqu'à 17 React libération. Lorsque vous avez besoin rendu asynchrone, il est sûr à utiliser. Il doit être utilisé méthode « componentDidMount » à la place.
Après avoir exécuté les mises à jour des composants de méthode DOM, il est un bon endroit pour appel API enregistré. La structure de base est jusqu'à présent comme suit:
class YourComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: []
}
}
componentDidMount() {
// Your axios request here
}
render() {
return (
// Your jsx goes here
);
}
}demande Axios a la structure de base suivante:
axios({ method: 'http request method', url: 'Api url' });Comme indiqué ci-dessus, l'objet de requête de base en tant que paramètre. Dans cet objet, spécifiez la méthode et l'URL de la clé. La méthode de requête HTTP et le type d'URL API sont à leurs valeurs respectives.
demande GET
En contrepartie de ce modèle de base, Axios requête GET suit comme:
const apiUrl = '你的api地址';
axios({ method: 'get', url: `${apiUrl}` });Lorsque l'API reçoit une demande et traite la demande, il enverra une réponse. L'assemblée doit traiter les données reçues d'une certaine façon, il peut être utilisé dans l'application. Dans cet exemple, nous définissons une clé nommée « postes » dans l'état, et mis un tableau vide. demande Axios est asynchrone. Nous avons besoin du « puis » lié à la fin de la demande pour traiter la réponse.
Puis, dans un bloc, nous pouvons mettre à jour les composants suivants:
axios({ method: 'get', url: `${apiUrl}` })
.then(response => {
this.setState({
posts: response.data
})
});(Le PS. Si nous Redux pour la gestion de l'Etat, peut-être dans le « puis » bloc appelé fonction d'ordonnancement. Ainsi, nous pouvons en réponse aux données stockées dans le Redux de stockage).
requête POST
Pour une demande typique POST, la demande de données sont transmises avec l'API. Les données sont généralement dans un état du composant peut résider Redux ou le stockage. En règle générale, les utilisateurs veulent publier les données dans la base de données est obtenue à partir de la forme. Nous utiliserons la fonction handleChange d'état des composants mis à jour. Axios notre demande sera émis fonction handleSubmit.
Après avoir soumis le formulaire, demande POST est envoyée à l'API. Vous pouvez compléter les étapes suivantes:
class YourComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
post: ''
}
}
handleChange(e) {
const { value } = e.target;
this.setState({
post: value
});
}
handleSubmit(e) {
e.preventDefault();
const { post } = this.state;
axios({
method: 'post',
url: `${apiUrl}/posts`,
data: post
})
}
render() {
return (
// Your form resides here
);
}
}demande de suppression
SUPPRIMER demande est similaire à la requête POST. Ce sont les boutons pour interagir avec la vue de compléter. Dans ce cas, lorsque vous cliquez sur le bouton « Supprimer », vous pouvez utiliser la fonction de demande handleClick. Vous pouvez compléter les étapes suivantes:
class YourComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: [
{
id: 1,
content: 'The first post'
}
]
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
const { id } = e.target;
const apiUrl = '你的api地址';
axios({
method: 'delete',
url: `${apiUrl}/posts/${id}`
})
}
render() {
const { posts } = this.state;
return (
<div>
{posts.map(post => (
<div key={post.id}>
<p>{post.content}</p>
<div>
<input
type="button"
id={post.id}
value="Delete"
onClick={this.handleClick}
/>
</div>
</div>
))}
</div>
);
}
}Après avoir cliqué sur le bouton, la demande de suppression de l'api, et les messages supprimer de la base de données. Afin de refléter ce à l'avant, une autre requête GET doit envoyer un composant de mise à jour de l'état.
la demande de JWT
JWT (JSON de jeton Web) peut être utilisé pour une application basée sur le Web pour les utilisateurs authentifient. Ces jetons sont généralement envoyés par une requête POST à l'API pour générer un correctement configuré. Après la génération de jetons, ils sont stockés par localStorage à l'utilisation. Dans ce cas, le jeton devra faire partie de la requête HTTP émise.
Pour illustrer ce point, nous examinerons l'exemple de requête GET:
const apiUrl = '你的api地址';
const token = `Bearer ${localStorage.getItem('jwt')}`;
axios({
method: 'get',
url: `${apiUrl}`,
headers: { Authorization: token }
});Comme la clé de jeton passé à un autre paramètres d'objet transmis dans l'appel Axios. POST et demande SUPPRIMER peuvent être modifiés de manière similaire, et le jeton de clé « tête » transfert.
Il. Ceci est un élément frontal React demande Axios est très simple à comprendre.
Référence:
https://www.objectx.cn/thread-75-1-1.html