vue2 axios发送请求等待响应过程中的函数及代码
时间: 2024-03-22 21:38:31 浏览: 64
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
在Vue2中使用Axios发送请求并等待响应的过程中,可以使用以下函数和代码:
1. 使用axios发送请求
```javascript
axios.get('url').then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
```
2. 等待响应过程中的函数
在等待响应的过程中,可以使用以下函数进行处理:
- `beforeSend`: 在发送请求之前调用
- `success`: 请求成功时调用
- `error`: 请求失败时调用
- `complete`: 请求完成时调用
例如:
```javascript
axios({
url: 'url',
method: 'get',
beforeSend: function () {
// 在发送请求之前调用
},
success: function (response) {
// 请求成功时调用
console.log(response);
},
error: function (error) {
// 请求失败时调用
console.log(error);
},
complete: function () {
// 请求完成时调用
}
});
```
3. 完整的代码示例
```javascript
new Vue({
el: '#app',
data: {
posts: []
},
mounted: function () {
this.getPosts();
},
methods: {
getPosts: function () {
var vm = this;
axios.get('url')
.then(function (response) {
vm.posts = response.data;
})
.catch(function (error) {
console.log(error);
});
}
}
});
```
在这个示例中,我们使用`mounted`钩子在Vue实例挂载后调用`getPosts`方法,在`getPosts`方法中我们发送一个GET请求,等待响应并将响应数据赋值给`posts`数据。如果请求失败,则会在控制台输出错误信息。
阅读全文