【Vue】Vue通过axios实现Ajax请求
【Vue】Vue通过axios实现Ajax请求
1. Vue与Ajax
vue本身是不支持发送ajax请求,需要通过其他库来实现的(比如vue1.0版本官方推荐的vue-resource、vue2.0版本官方推荐的axios),或者也可以使用jquery来发送ajax请求。
vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新
到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,在这里大家了解一下vue-resource就可以。
vue-resource的github: https://github.com/pagekit/vue-resource
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
axios的github:https://github.com/axios/axios
2. 安装Axios
-
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
或
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
-
使用 npm:
npm install axios
- 直接导入js文件
2. get请求
我们可以简单的读取 JSON 数据:
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('url')
.then(response => (this.info = response))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
})
使用 response.data 读取 JSON 数据:
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('url')
.then(response => (this.info = response.data.sites))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
})
GET 方法传递参数格式如下:
// 直接在 URL 上添加参数 ID=12345
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 也可以通过 params 设置参数:
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
3. post请求
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.post('url')
.then(response => (this.info = response))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
})
POST 方法传递参数格式如下:
axios.post('/user', {
firstName: 'Fred', // 参数 firstName
lastName: 'Flintstone' // 参数 lastName
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
4. 执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
5. 请求方法的别名
为方便使用,官方为所有支持的请求方法提供了别名,可以直接使用别名来发起请求:
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
注意:在使用别名方法时, url、method、data 这些属性都不必在配置中指定。
本文地址:https://blog.csdn.net/qq_41879343/article/details/107469508
上一篇: Centos7 安装mysql
下一篇: 百度网盘用户激励计划怎么加入或退出?
推荐阅读
-
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
-
基于vue cli 通过命令行传参实现多环境配置
-
vue axios数据请求get、post方法及实例详解
-
vue+axios+element ui 实现全局loading加载示例
-
VUE-Table上绑定Input通过render实现双向绑定数据的示例
-
vue axios基于常见业务场景的二次封装的实现
-
vue.js通过自定义指令实现数据拉取更新的实现方法
-
vue axios数据请求及vue中使用axios的方法
-
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
-
vue项目使用axios发送请求让ajax请求头部携带cookie的方法