美文网首页
10. VueJS ajax

10. VueJS ajax

作者: 飞扬code | 来源:发表于2019-11-21 08:30 被阅读0次

1. vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,在这里大家了解一下vue-resource就可以。
vue-resource的github: https://github.com/pagekit/vue-resource

2. axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
axios的github:https://github.com/axios/axios

2.1 引入axios

首先就是引入axios,如果你使用es6,只需要安装axios模块之后

import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios

当然也可以用script引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.2 get请求
//通过给定的ID来发送请求
axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response);
  })
  .catch(function(err){
    console.log(err);
  });
//以上请求也可以通过这种方式来发送
axios.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(err){
  console.log(err);
});
2.3 post请求
axios.post('/user',{
  firstName:'Fred',
    lastName:'Flintstone'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

为方便起见,为所有支持的请求方法提供了别名

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]])

相关文章

网友评论

      本文标题:10. VueJS ajax

      本文链接:https://www.haomeiwen.com/subject/ckrzictx.html