Parlons de la façon d'utiliser axios dans le projet vue dans cet article ? Partage d'utilisation de base

Conseils : Cet article explique en détail les exemples d'axios dans le projet vue. Lors de l'utilisation du framework Vue.js pour développer des projets front-end, les requêtes ajax sont souvent envoyées à l'interface du serveur. Pendant le processus de développement, axios doit être davantage encapsulé pour faciliter son utilisation dans le projet. [Partage vidéo d'apprentissage : tutoriel vidéo vue, vidéo web front-end]

Introduction à Axios

Nom complet du framework axios (ajax – I/O – système) :

• basé sur promise code>client http pour navigateurs et <code>node.js, afin que vous puissiez utiliser l'API Promise

promise用于浏览器和node.js的http客户端，因此可以使用Promise API

一、axios是干啥的

说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。

Ajax(Asynchronous JavaScript and XML)：
异步网络请求。Ajax能够让页面无刷新的请求数据。

实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊：

• 原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦
• jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架

Axios（ajax i/o system）：
这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点：

• 在浏览器中创建XMLHttpRequest请求
• 在node.js中发送http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消要求
• 自动转换JSON数据

• 客户端支持防止CSRF/XSRF(跨域请求伪造)

二、安装使用

安装有三种方式：

npm安装

 npm install axios

bower安装

bower install axios

通过cdn引入

<script></script>

在vue项目的main.js文件中引入axios

import axios from 'axios'
Vue.prototype.$axios = axios

在组件中使用axios

<script>
	export default {
		mounted(){
			this.$axios.get(&#39;/goods.json&#39;).then(res=>{
				console.log(res.data);
			})
		}
	}
</script>

三、Axios请求方式

1、axios可以请求的方法：

• get：获取数据，请求指定的信息，返回实体对象
• post：向指定资源提交数据（例如表单提交或文件上传）
• put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
• patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
• delete：请求服务器删除指定的数据

2、get请求

示例代码

方法一

 //请求格式类似于 http://localhost:8080/goods.json?id=1
this.$axios.get('/goods.json',{
    			params: {
                    id:1
                }
			}).then(res=>{
					console.log(res.data);
				},err=>{
					console.log(err);
			})

方法二

this.$axios({
		method: 'get',
		url: '/goods.json',
    	params: {
            id:1
        }
	}).then(res=>{
		console.log(res.data);
	},err=>{
		console.log(err);
	})

3、post请求

post请求一般分为两种类型

1、form-data 表单提交，图片上传、文件上传时用该类型比较多
2、application/json 一般是用于 ajax 异步请求

示例代码

方法一

this.$axios.post('/url',{
				id:1
			}).then(res=>{
				console.log(res.data);
			},err=>{
				console.log(err);
			})

方法二

$axios({
	method: 'post',
	url: '/url',
	data: {
		id:1
	}
}).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})

form-data请求

let data = {
	//请求参数
}

let formdata = new FormData();
for(let key in data){
	formdata.append(key,data[key]);
}

this.$axios.post('/goods.json',formdata).then(res=>{
	console.log(res.data);
},err=>{
	console.log(err);
})

4、put和patch请求

示例代码

put请求

this.$axios.put('/url',{
				id:1
			}).then(res=>{
				console.log(res.data);
			})

patch请求

this.$axios.patch('/url',{
				id:1
			}).then(res=>{
				console.log(res.data);
			})

5、delete请求

示例代码

参数以明文形式提交

this.$axios.delete('/url',{
				params: {
					id:1
				}
			}).then(res=>{
				console.log(res.data);
			})

参数以封装对象的形式提交

1. Quoi est-ce qu'axios le fait ? En parlant de axios, nous devons parler de Ajax. Lorsque l'ancienne page du navigateur demande des données au serveur, parce que les données de la page entière sont renvoyées, la page sera obligée de s'actualiser, ce qui n'est pas très convivial. Et nous n'avons besoin de modifier qu'une partie des données de la page, mais ce qui est envoyé depuis le serveur, ce sont les données de la page entière, ce qui consomme beaucoup de ressources réseau. Nous avons seulement besoin de modifier certaines données sur la page, et nous espérons également ne pas actualiser la page, donc des requêtes réseau asynchrones voient le jour.

Ajax

(JavaScript et XML asynchrones) :
Demande réseau asynchrone. Ajax permet à la page de demander des données sans actualiser.

Il existe de nombreuses façons d'implémenter ajax, telles que l'ajax encapsulé par jQuery, XMLHttpRequest natif et axios. Mais toutes les méthodes ont des avantages et des inconvénients :

🎜La configuration et les méthodes d'appel de XMLHttpRequest natif sont très lourdes, et il est très difficile d'implémenter des requêtes asynchrones🎜L'ajax de jQuery est très simple à utiliser par rapport à l'ajax natif, mais ce n'est pas nécessaire Le framework jQuery est référencé car des requêtes réseau asynchrones ajax sont utilisées🎜🎜Axios🎜 (système d'entrée/sortie ajax) :
Ce n'est pas une nouvelle technologie, c'est essentiellement une encapsulation du XMLHttpRequest natif, un client HTTP utilisable dans les navigateurs et nodejs, sauf qu'il est basé sur Promise et est conforme aux dernières spécifications ES. Possède les fonctionnalités suivantes :🎜🎜🎜Créer une requête XMLHttpRequest dans le navigateur🎜Envoyer une requête http dans node.js🎜Support Promise API🎜Interception des requêtes et des réponses🎜Conversion Données de requête et de réponse🎜Annuler la demande🎜Conversion automatique des données JSON🎜🎜Support client pour empêcher CSRF/XSRF (falsification de requêtes inter-domaines)🎜 🎜🎜🎜🎜🎜2. Installation et utilisation 🎜🎜🎜Il existe trois façons d'installer : 🎜🎜Installation npm 🎜

this.$axios.delete('/url',{
				data: {
					id:1
				}
			}).then(res=>{
				console.log(res.data);
			})

//方法二
axios({
    method: 'delete',
    url: '/url',
    params: { id:1 }, //以明文方式提交参数
    data: { id:1 } //以封装对象方式提交参数
}).then(res=>{
	console.log(res.data);
})

🎜Installation bower 🎜

 this.$axios.all([
	this.$axios.get('/goods.json'),
	this.$axios.get('/classify.json')
]).then(
	this.$axios.spread((goodsRes,classifyRes)=>{
		console.log(goodsRes.data);
		console.log(classifyRes.data);
	})
)

🎜Introduit via cdn 🎜

let instance = this.$axios.create({
				baseURL: 'http://localhost:9090',
				timeout: 2000
			})
			
instance.get('/goods.json').then(res=>{
	console.log(res.data);
})

🎜Introduit dans le main.js fichier du projet vue axios🎜

//配置全局的超时时长
this.$axios.defaults.timeout = 2000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';

🎜Utilisez axios🎜

let instance = this.$axios.create();
instance.defaults.timeout = 3000;

🎜🎜🎜3. "1axios_86 ">🎜🎜🎜1. Méthodes qu'axios peut demander : 🎜🎜🎜🎜🎜get : obtenir des données, demander des informations spécifiées, renvoyer des objets d'entité🎜post : soumettre des données à des ressources spécifiées (telles que la soumission d'un formulaire ou téléchargement de fichier )🎜put : Mettre à jour les données, les données transmises du client au serveur remplacent le contenu du document spécifié🎜patch : Mettre à jour les données, qui est un complément à la méthode put et est utilisé pour effectuer une analyse partielle des ressources connues. Mise à jour🎜delete : demander au serveur de supprimer les données spécifiées🎜🎜🎜🎜2, obtenir la demande🎜🎜 🎜🎜🎜Exemple de code🎜🎜🎜 Première méthode🎜

this.$axios.get('/goods.json',{
				timeout: 3000
			}).then()

🎜 Deuxième méthode🎜

this.$axios.interceptors.request.use(config=>{
				// 发生请求前的处理

				return config
			},err=>{
				// 请求错误处理

				return Promise.reject(err);
			})

//或者用axios实例创建拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
    return config
})

🎜🎜🎜🎜3. 🎜Les demandes de publication sont généralement divisées en deux types🎜 🎜1. form-data Ce type est couramment utilisé pour la soumission de formulaires, le téléchargement d'images et le téléchargement de fichiers
2. application/json est généralement utilisé pour les requêtes asynchrones ajax 🎜🎜🎜Exemple de code🎜🎜🎜 Première méthode🎜

this.$axios.interceptors.response.use(res=>{
				//请求成功对响应数据做处理

				return res //该返回对象会传到请求方法的响应对象中
			},err=>{
				// 响应错误处理

				return Promise.reject(err);
			})

🎜 Deuxième méthode🎜

let instance = this.$axios.interceptors.request.use(config=>{
				config.headers = {
					token: ''
				}
				return config
			})
			
//取消拦截
this.$axios.interceptors.request.eject(instance);

🎜form-data request 🎜

this.$axios.get('/url').then(res={

			}).catch(err=>{
				//请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象
				console.log(err);
			})

🎜🎜🎜🎜4, demande de put et de patch🎜🎜🎜🎜🎜Exemple de code🎜🎜🎜demande de put🎜

let source = this.$axios.CancelToken.source();

this.$axios.get('/goods.json',{
				cancelToken: source
			}).then(res=>{
				console.log(res)
			}).catch(err=>{
				//取消请求后会执行该方法
				console.log(err)
			})

//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息');

🎜patch request🎜rrreee🎜🎜🎜🎜5. Demande de suppression🎜🎜🎜🎜🎜Exemple de code🎜🎜🎜Les paramètres sont soumis en texte brut🎜rrreee🎜Les paramètres sont soumis sous forme d'objets encapsulés >🎜rrreee🎜🎜🎜🎜🎜6 Requêtes simultanées🎜🎜🎜🎜Requêtes simultanées : effectuez plusieurs requêtes en même temps et traitez les valeurs de retour de manière uniforme🎜. 🎜🎜Exemple de code🎜🎜

 this.$axios.all([
	this.$axios.get('/goods.json'),
	this.$axios.get('/classify.json')
]).then(
	this.$axios.spread((goodsRes,classifyRes)=>{
		console.log(goodsRes.data);
		console.log(classifyRes.data);
	})
)

四、Axios实例

1、创建axios实例

示例代码

let instance = this.$axios.create({
				baseURL: 'http://localhost:9090',
				timeout: 2000
			})
			
instance.get('/goods.json').then(res=>{
	console.log(res.data);
})

可以同时创建多个axios实例。
  axios实例常用配置：

• baseURL 请求的域名，基本地址，类型：String
• timeout 请求超时时长，单位ms，类型：Number
• url 请求路径，类型：String
• method 请求方法，类型：String
• headers 设置请求头，类型：Object
• params 请求参数，将参数拼接在URL上，类型：Object
• data 请求参数，将参数放到请求体中，类型：Object

2、axios全局配置

示例代码

//配置全局的超时时长
this.$axios.defaults.timeout = 2000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';

3、axios实例配置

示例代码

let instance = this.$axios.create();
instance.defaults.timeout = 3000;

4、axios请求配置

示例代码

this.$axios.get('/goods.json',{
				timeout: 3000
			}).then()

以上配置的优先级为：请求配置 > 实例配置 > 全局配置

五、拦截器

拦截器：在请求或响应被处理前拦截它们

1、请求拦截器

示例代码

this.$axios.interceptors.request.use(config=>{
				// 发生请求前的处理

				return config
			},err=>{
				// 请求错误处理

				return Promise.reject(err);
			})

//或者用axios实例创建拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
    return config
})

2、响应拦截器

示例代码

this.$axios.interceptors.response.use(res=>{
				//请求成功对响应数据做处理

				return res //该返回对象会传到请求方法的响应对象中
			},err=>{
				// 响应错误处理

				return Promise.reject(err);
			})

3、取消拦截

示例代码

let instance = this.$axios.interceptors.request.use(config=>{
				config.headers = {
					token: ''
				}
				return config
			})
			
//取消拦截
this.$axios.interceptors.request.eject(instance);

六、错误处理

示例代码

this.$axios.get('/url').then(res={

			}).catch(err=>{
				//请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象
				console.log(err);
			})

七、取消请求

示例代码

let source = this.$axios.CancelToken.source();

this.$axios.get('/goods.json',{
				cancelToken: source
			}).then(res=>{
				console.log(res)
			}).catch(err=>{
				//取消请求后会执行该方法
				console.log(err)
			})

//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息');

（学习视频分享：web前端开发、编程基础视频）

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!