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]
Nom complet du framework axios (ajax – I/O – système) :
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我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。
Ajax(Asynchronous JavaScript and XML)：
异步网络请求。Ajax能够让页面无刷新的请求数据。
实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊：
Axios（ajax i/o system）：
这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点：
客户端支持防止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('/goods.json').then(res=>{
console.log(res.data);
})
}
}
</script>示例代码
方法一
//请求格式类似于 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);
})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);
})示例代码
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);
})示例代码
参数以明文形式提交
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) :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) :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);
}) 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);
})
)let instance = this.$axios.create({
baseURL: 'http://localhost:9090',
timeout: 2000
})
instance.get('/goods.json').then(res=>{
console.log(res.data);
})main.js fichier du projet vue axios🎜//配置全局的超时时长 this.$axios.defaults.timeout = 2000; //配置全局的基本URL this.$axios.defaults.baseURL = 'http://localhost:8080';
axios🎜let instance = this.$axios.create(); instance.defaults.timeout = 3000;
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
})form-data Ce type est couramment utilisé pour la soumission de formulaires, le téléchargement d'images et le téléchargement de fichiersapplication/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);
})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);
})
)示例代码
let instance = this.$axios.create({
baseURL: 'http://localhost:9090',
timeout: 2000
})
instance.get('/goods.json').then(res=>{
console.log(res.data);
})可以同时创建多个axios实例。
axios实例常用配置：
示例代码
//配置全局的超时时长 this.$axios.defaults.timeout = 2000; //配置全局的基本URL this.$axios.defaults.baseURL = 'http://localhost:8080';
示例代码
let instance = this.$axios.create(); instance.defaults.timeout = 3000;
示例代码
this.$axios.get('/goods.json',{
timeout: 3000
}).then()以上配置的优先级为：请求配置 > 实例配置 > 全局配置
拦截器：在请求或响应被处理前拦截它们
示例代码
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
})示例代码
this.$axios.interceptors.response.use(res=>{
//请求成功对响应数据做处理
return res //该返回对象会传到请求方法的响应对象中
},err=>{
// 响应错误处理
return Promise.reject(err);
})示例代码
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('取消后的信息');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!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
