Tipps: In diesem Artikel werden die Beispiele von Axios im Vue-Projekt ausführlich erläutert. Bei der Verwendung des Vue.js-Frameworks zur Entwicklung von Front-End-Projekten werden häufig Ajax-Anfragen an die Serverschnittstelle gesendet. Während des Entwicklungsprozesses muss Axios weiter gekapselt werden, um die Verwendung im Projekt zu erleichtern. [Lernvideo-Sharing: vue-Video-Tutorial, Web-Frontend-Video]
Vollständiger Name des Axios-Frameworks (Ajax – I/O – System):
promise code>http-Client für Browser und <code>node.js, damit Sie die Promise-API verwenden können
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. Was Funktioniert Axios? Apropos axios, wir müssen über Ajax sprechen. Wenn die alte Browserseite Daten vom Server anfordert, wird eine Aktualisierung der Seite erzwungen, da die Daten der gesamten Seite zurückgegeben werden, was nicht sehr benutzerfreundlich ist. Und wir müssen nur einen Teil der Daten auf der Seite ändern, aber die Daten der gesamten Seite werden vom Server gesendet, was viele Netzwerkressourcen verbraucht. Wir müssen nur einige Daten auf der Seite ändern und hoffen auch, dass die Seite nicht aktualisiert wird, sodass asynchrone Netzwerkanforderungen entstehen.
Ajax
(Asynchrones JavaScript und XML):Es gibt viele Möglichkeiten, Ajax zu implementieren, z. B. Ajax, das von jQuery, nativem XMLHttpRequest und Axios gekapselt wird. Aber alle Methoden haben Vor- und Nachteile:
🎜Die Konfigurations- und Aufrufmethoden von nativem XMLHttpRequest sind sehr umständlich und die Implementierung asynchroner Anforderungen ist sehr mühsam🎜jQuerys Ajax ist im Vergleich zu nativem Ajax sehr einfach zu verwenden, aber Es ist nicht erforderlich, dass auf das jQuery-Framework verwiesen wird, da asynchrone Ajax-Netzwerkanforderungen verwendet werden🎜🎜Axios🎜 (Ajax-E/A-System):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 Datei des Vue-Projekts axios🎜//配置全局的超时时长 this.$axios.defaults.timeout = 2000; //配置全局的基本URL this.$axios.defaults.baseURL = 'http://localhost:8080';
axios🎜let instance = this.$axios.create(); instance.defaults.timeout = 3000;
Methode eins🎜this.$axios.get('/goods.json',{
timeout: 3000
}).then() Methode zwei🎜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 Dieser Typ wird häufig zum Senden von Formularen, zum Hochladen von Bildern und zum Hochladen von Dateien verwendet.application/json wird im Allgemeinen für asynchrone Ajax-Anfragen verwendet 🎜🎜🎜Beispielcode🎜🎜🎜 Methode eins🎜this.$axios.interceptors.response.use(res=>{
//请求成功对响应数据做处理
return res //该返回对象会传到请求方法的响应对象中
},err=>{
// 响应错误处理
return Promise.reject(err);
}) Methode zwei🎜let instance = this.$axios.interceptors.request.use(config=>{
config.headers = {
token: ''
}
return config
})
//取消拦截
this.$axios.interceptors.request.eject(instance);Formulardatenanforderung 🎜this.$axios.get('/url').then(res={
}).catch(err=>{
//请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象
console.log(err);
})Put-Anfrage🎜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 Anfrage🎜rrreee🎜🎜🎜🎜5. Anfrage löschen🎜🎜🎜🎜🎜Beispielcode🎜🎜🎜Parameter werden im Klartext übermittelt🎜rrreee🎜Parameter werden in Form von gekapselten Objekten übermittelt🎜rrreee🎜🎜🎜🎜🎜6. Gleichzeitige Anfragen🎜🎜🎜🎜Gleichzeitige Anfragen: Stellen Sie mehrere Anfragen gleichzeitig und verarbeiten Sie die Rückgabewerte einheitlich🎜🎜 🎜Beispielcode🎜🎜 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('取消后的信息');Das obige ist der detaillierte Inhalt vonLassen Sie uns in diesem Artikel darüber sprechen, wie man Axios im Vue-Projekt verwendet. Grundlegende Nutzungsfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
