Répertoire d'articles
Introduction
Il existe de nombreuses façons d'envoyer des requêtes réseau dans Vue, alors en développement, comment choisir?
1. Nous utilisons souvent jQuery-Ajax (par rapport à l'Ajax traditionnel très simple d'utilisation), pourquoi ne pas le choisir?
- Tout d'abord, soyons clairs: jQuery est rarement utilisé dans tout le développement de Vue
- Donc, afin de nous faciliter la tâche de faire une demande réseau, il n'est pas raisonnable de citer un jQuery spécifiquement
- Le code de jQuery est de 1w + lignes, le code de Vue n'est que de 1w + lignes
- Il n'est donc pas nécessaire de citer ce framework lourd pour utiliser les requêtes réseau
2. Lorsque Vue 1.x a été officiellement lancé, Vue-resource a été lancé. Le volume de Vue-resource est beaucoup plus petit que celui de jQuery. De plus, Vue-resource est officiellement lancé. Pourquoi ne pas le choisir?
- Après le lancement de Vue2.0, l'auteur de Vue a expliqué la suppression de vue-resource dans Issues on GitHub, et il ne sera pas mis à jour à l'avenir.
- Ensuite, cela signifie que lorsque vue-reource ne prend plus en charge la nouvelle version, il ne continuera pas à mettre à jour et à maintenir
- Il existe de grands dangers cachés pour le développement et la maintenance des futurs projets
3. Utilisez axios
Tout en déclarant que vue-resource ne sera plus mis à jour et maintenu, l'auteur de vue recommande un framework: axios
Deux, introduction axios
axios est un client HTTP basé sur Promise pour les navigateurs et les nœuds. Il s'agit essentiellement d'une encapsulation de XHR natif, sauf qu'il s'agit d'une version d'implémentation de Promise et conforme aux dernières spécifications ES. axios a une conception simple, une API simple, prend en charge les navigateurs et les nœuds
Traits:
- Envoyer des requêtes XMLHttpRequests dans le navigateur
- Prise en charge de l'envoi de requêtes http dans node.js
- API de promesse de support
- Intercepter la demande et la réponse
- Convertir automatiquement les données JSON
- Convertir les données de demande et de réponse, etc.
Prend en charge plusieurs méthodes de demande:
- axios (config)
- axios.request (config)
- axios.get (url [, config])
- axios.delete (url [, config])
- axios.head (url [, config])
- axios.post (url [, données [, config]])
- axios.put (url [, données [, config]])
- axios.patch (url [, données [, config]])
Trois, installation
Pour utiliser en vue, j'ai créé un projet avec vue-cli pour démontrer. Il y a un lien de téléchargement du code de démonstration au bas de ce blog pour l'apprentissage et la communication.
npm install axios --save
Quatre, utilisation de base
1. Envoyez une demande d'obtention
(1) Utiliser axios(config), il envoie une demande de récupération par défaut
axios({
url: '127.0.0.1:8000',
//拼接参数
params: {
name: 'webchang',
page: 1
},
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
Remarque: Étant donné qu'axios est basé sur la promesse , l'exécution axios({ url: 'xxx' })renverra une promesse.Si l'obtention des données est réussie, les appels sont résolus en interne, nous pouvons donc ajouter la méthode then () derrière elle.
(2) Utilisation axios.get(url[, config])sans paramètres
axios.get('http://127.0.0.1:8000')
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
})
(3) Utilisation axios.get(url[, config])avec des paramètres
axios.get('http://127.0.0.1:8000', {
params: {
name: 'webchang',
page: 1
}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
Pour obtenir des demandes, nous pouvons également épisser directement les paramètres à l'arrière de l'url
axios.get('http://127.0.0.1:8000?name=webchang')
La réponse à la requête axios contient les informations suivantes:
{
// `data` 由服务器提供的响应
data: {
},
// `status` HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: "OK",
// `headers` 服务器响应的头
headers: {
},
// `config` 是为请求提供的配置信息
config: {
}
}
2. Envoyer une demande de message
(1) En utilisant axios(config), nous pouvons spécifier sa méthode comme post
axios({
url: '127.0.0.1:8000',
method: 'post',
data: {
// post请求的参数要用 data传递
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
(2) Utilisation axios.post(url[, config])
axios.post('/user', {
firstName: 'Fred', //参数
lastName: 'Flintstone' //参数
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
3. Envoyez des demandes simultanées
Parfois, nous pouvons avoir besoin d'envoyer plusieurs demandes en même temps, puis de traiter après que plusieurs demandes aient reçu les données. On peut utiliseraxios.all()
Le paramètre de axios.all ([]) est un tableau et chaque élément du tableau est une requête. Le résultat renvoyé est également un tableau et chaque élément est le résultat de la demande.
axios.all([
axios({
url: 'http://127.0.0.1:8000/home/multidata'
}),
axios({
url: 'http://127.0.0.1:8000/api/w6/home/data',
params: {
type: 'sell',
page: 1
},
})
]).then(res => {
console.log(res[0]); //res 是一个数组，存放每个请求的数据
console.log(res[1]);
}).catch(err => {
console.log(err);
})
L'utilisation axios.spreadpeut entraîner le tableau [res1, res2] étend res1, res2
axios.all([
axios({
url: 'http://127.0.0.1:8000/home/multidata'
}),
axios({
url: 'http://127.0.0.1:8000/home/data',
params: {
type: 'sell',
page: 1
},
})
]).then(axios.spread((res1,res2) => {
console.log(res1); //res1是第一个请求的结果
console.log(res2); //res2是第二个请求的结果
})).catch(err => {
console.log(err);
})
4. Configuration globale
Dans l'exemple ci-dessus, notre baseURL est fixe. En fait, de nombreux paramètres peuvent être fixés pendant le développement. À ce stade, nous pouvons effectuer une extraction, ou utiliser la configuration globale de axiox
axios.defaults.baseURL = 'http://127.0.0.1:8000'
axios.defaults.timeout = 5000
axios({
url: '/home/data', // url的前边就可以省略baseUrl
params: {
type: 'sell',
page: 1
}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
5. Créez une instance d'axios
Lorsque nous importons des objets depuis le module axios, l'instance utilisée est l'instance par défaut. Lorsque certaines configurations par défaut sont définies pour cette instance, ces configurations sont fixes. Tout comme celui utilisé dans le code ci-dessus.
Cependant, dans le développement ultérieur, certaines configurations peuvent être différentes, par exemple, certaines demandes doivent utiliser une baseURL ou un délai d'expiration ou un type de contenu spécifique . Cette fois, nous pouvons utiliser axios.create([config])pour créer une nouvelle instance, et le pass appartient aux informations de configuration de l'instance.
//创建新的axios实例，为该实例设置特定的 baseUrl等配置
const axiosInstance = axios.create({
baseURL: 'http://127.0.0.1:8000',
timeout: 5000
})
// 使用实例发送网络请求，默认为 get请求
axiosInstance({
url:'/home/multidata'
}).then(res => {
console.log(res);
})
Cinq, emballage de module
Lors d'une requête réseau, même si nous choisissons un framework axios tiers, nous essayons de le ré-encapsuler. N'utilisez pas directement un framework tiers pour effectuer des requêtes réseau, mais utilisez un module que nous avons emballé pour effectuer des requêtes réseau. Pourquoi?
Parce que si le framework tiers n'est soudainement pas maintenu un certain jour, ou s'il y a de sérieux bugs, de sérieuses failles, c'est en fait une chose très dangereuse. Dans ce cas, si notre application dépend directement de ce framework tiers, il est très gênant de changer le framework pour le moment. Nous ferions donc mieux d'encapsuler le framework tiers au lieu de l'utiliser directement dans le projet.
Nous pouvons créer un dossier réseau et créer le fichier request.js dans le dossier
import axios from "axios";
export function request(config) {
const instance = axios.create({
baseURL: 'http://xxx',
timeout: 5000
})
return instance(config)
}
utilisation:
import {
request} from '../network/request'
request({
url: '/home/multidata'
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
Bien qu'il n'encapsule que quelques lignes de code supplémentaires, il réduit considérablement la dépendance du projet vis-à-vis d'axios. Si un jour le projet n'est pas prêt à utiliser axios, modifiez simplement request.js
Six, utilisez des intercepteurs
Axios nous fournit des intercepteurs pour effectuer le traitement correspondant après l'envoi de chaque requête ou l'obtention de la réponse.
Comment utiliser un intercepteur?
export function request(config) {
//1.创建axios的实例
const instance = axios.create({
baseURL: 'http://152.136.185.210:8000/api/w6',
timeout: 5000
})
//2.axios的拦截器
//拦截请求
instance.interceptors.request.use(config => {
console.log('拦截请求成功',config);
return config;
},err => {
//可能的错误比如请求超时，可以将页面跳转到一个错误页面中。
console.log('拦截请求失败');
return err;
})
//拦截相应
instance.interceptors.response.use(response => {
console.log('拦截相应成功',response);
//对数据进行过滤
return response.data;
},err => {
console.log('拦截相应失败');
return err;
})
return instance(config)
}
Scénarios d'interception des demandes:
- Certaines informations de la demande ne répondent pas aux exigences du serveur et doivent être traitées en premier
- Chaque fois qu'une demande réseau est envoyée, je souhaite afficher une icône demandée dans l'interface
- Certaines requêtes réseau (comme la connexion) doivent contenir des informations spéciales (jeton)
Interceptez la scène correspondante:
-
Lors de l'interception réussie de la réponse, les données sont principalement filtrées.
-
Lors de l'échec de l'interception de la réponse, le code d'erreur de l'erreur peut être jugé en fonction de l'état et passer à différentes pages d'invite d'erreur.
7. Informations
https://gitee.com/mirrors/axios/tree/v0.20.0/
Le lien de téléchargement du code de démonstration de ce blog: https://webchang.lanzous.com/ikbe5knbkwb Mot de passe: db81