vue里面 fetch和 axios
vue 里面 axios 和 fetch 的请求 方式
目的： 是在框架中使用数据请求 vue 渲染数据的方法
回顾：
封装ajax jquery 【 $.get $ .post $.ajax $ .load 】
框架： 数据请求
使用原生js提供的fetch 使用第三方封装库： axios
数据 分成 静态数据 和动态数据库数据
1. 请求静态数据 【 模拟假数据 - mock数据 】
* 线上拷贝相似字段数据
* 使用第三方 mock.js 来生成json数据 【 用代码来生成数据 】
* esay mock线上网站
2. 请求动态数据 【 通过后端接口来请求数据 】
* php * java * node * c
我们进行axios 的数据请求
静态数据 get动态数据 post动态数据
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<body>
<section id="root">
<button @click="static"> 静态数据 </button>
<button @click="get"> 动态数据 - get </button>
<button @click="post"> 动态数据 - post </button>
<ul>
<li v-for="item in list"> //利用循环进行渲染
<!-- <img :=src "ltrm.poster">
<h3>{{ltem.name}}</h3> -->
{{item['name']}}
</li>
</ul>
</section>
<!-- 自己开始写通过第三方库，来渲染 买电影票的小程序 -->
<script>
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//设置全部请求头
Vue.prototype.$http = axios
new Vue({
el: '#root',
data: {
list: null //点击时候刷新 vue 看有没有获取到数据
},
methods: {
static() {
const p = axios({
url: './daa/mp.json'
})
// .then(res => {
// console.log(res.data.data.films);
// // this.list = res.data.data.films;
// this.list = res.data.data.films;
// console.log(this.list);
// })
// .catch(error => console.log(error))
//静态的第一种写法为什么，我的this指向不管用
// this.$http
// .get('./daa/mp.json')
// .then(res => {
// console.log(res)
// this.list = res.data.data.films //赋值语句
// })
// .catch(error => console.log(error))
//静态等会从新写没有成功，写作业
},
get() { //注意跨域问题，这个服务器不稳定 要建立后端服务器的
axios({
url: 'http://127.0.0.1/node/node06/php/get.php',
params: {
a: 3,
b: 6
}
}).then(res => console.log(res))
.catch(error => console.log(error))
},
//请求头有单一设置(headers{})和 全部设置
post() {
let params = new URLSearchParams(); //这里是new 东西来设置 进行数据传递
params.append('a', 1);
params.append('b', 2); //一个params 在这里传输一个键值对
axios({
url: 'http://127.0.0.1/node/node06/php/post.php',
method: 'post',
data: params,
}).then(res => console.log(res))
.catch(error => close.log(error))
}
}
})
</script>
fetch 的请求
<div id="app">
<button @click = "static"> 静态数据 </button>
<button @click = "get"> 动态数据 - get </button>
<button @click = "post"> 动态数据 - post </button>
<ul>
<li v-for = "item in list">
<div>
<img :style = "{ width: '100px',height: '100px'}" :src="item.pic" alt="">
</div>
<div>
<h3> {{ item.d_title }} </h3>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
list: []
},
methods: {
static () {
fetch('./data/list.json') //静态获取的数据
.then( res => res.json() ) //将获得的json数据格式化 (json字符串格式化) 格式许多没有用的 ，那个封装防止攻击的
.then( data => {
this.list = data.data.content
})
.catch( error => console.log( error ))
},
get () {
fetch('http://localhost/get.php?a=1&b=2')
.then( res => res.text() )
.then( data => console.log( data ))
.catch( error => console.log( error ))
},
post () {
fetch('http://localhost/post.php',{
method: 'POST',
headers: new Headers({ //设置局部的请求头
'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
}),
body: new URLSearchParams([['a',1],['b',2]]).toString()
}).then( res => res.text() )
.then( data => console.log( data ))
.catch( error => console.log( error ))
}
}
})
</script>
使用原生js提供的fetch 使用第三方封装库： axios
Vue中可以统一对axios进行挂载 Vue.prototype.$http = axios
fetch axios 的区别 jq ajax
axios 对已获得的数据进行了一层封装 XSRF 防止攻击
axios底层自动对数据进行了格式化
可以在node.js中使用
提供了并发请求的接口
支持Promise API
fetch并没有进行封装，拿到就是格式化后的数据
1 fetch进行了多一层的格式化
res.json()
res.blob() 格式化二进制
res.text()
2 要手动拼接参数
3 基于e6 的promise
4 脱离了XHR，是ES规范里新的实现方式
jqery ajax 的请求
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
Vue1.0数据请求我们使用的是一个第三方的封装库，这个封装库叫做 vue-resource
vue-resource现在已经淘汰了,它的作者也推荐我们使用axios
vue-resource使用形式和axios一样的
this. h t t p . g e t t h i s . http.get this. http.getthis.http.post
this.$http({})
vue-resource有jsonp方法,而axios是没有的
Vue2.0
axios [ 可以说是目前最好的数据请求的封装库 ]
fetch