Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 请求 - Fetch
目录
Fetch
XMLHttpRequest是一个设计粗糙的API，配置和调用方式非常混乱，
而且基于事件的异步模型写起来不友好，兼容性也不好。
Fetch-get
格式
Fetch(路径?参数=值&参数=值).then(res=>res.json()).then(res=>{console.log(res)})
示例
准备假数据
在同级目录下创建json目录，在其中创建test.json文件。
文件内容如下：
{
"name": "张三",
"age": 25,
"address": "北京市昌平区"
}请求文件
在json目录同级下创建fetch-get.html文件.
内容如下：
<script src="../lib/vue.js"></script>
<div id="box">
<button @click="handleGet">ajax-fetch-get</button>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
},
methods: {
handleGet() {
fetch("./json/test.json")
.then(res => {
// 状态码， 响应头， 拿不到真正的数据
return res.json();
})
.then(res => {
// 输出数据的位置
console.log(res)
})
.catch(err => {
// 打印错误信息
console.log(err)
})
}
}
})
</script>最后使用网站访问
Fetch-post
格式
与get方式不同，需要设置请求头。
Fetch(路径, {method:’post’, headers:{“Content-Type”:”application/x-www-form-urlencoded”}, body:’name=zhangsan&age=18’}).then(res => res.json()).then(res=>{console.log(res)})
示例
请求示例1
请求数据为字符串，请求头为普通的表单提交。
示例如下：
<script src="../lib/vue.js"></script>
<div id="box">
<button @click="handlePost">ajax-fetch-post</button>
</div>
<script>
let vm = new Vue({
el: "#box",
data: {},
methods: {
handlePost() {
fetch("./json/test.json", {
method: "post",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "name=zhangsan&age=18"
}).then(res => {
// 状态码， 响应头， 拿不到真正的数据
return res.json();
}).then(res => {
// 输出数据的位置
console.log(res)
}).catch(err => {
// 打印错误信息
console.log(err)
})
}
}
})
</script>请求示例2
请求接口数据，设置请求头为json数据，请求数据必须为json格式。
示例如下：
<script src="../lib/vue.js"></script>
<div id="box">
<button @click="handlePost">ajax-fetch-post</button>
</div>
<script>
let vm = new Vue({
el: "#box",
data: {},
methods: {
handlePost() {
fetch("./json/test.json", {
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
name:"zhangsan",
age:19
})
}).then(res => {
// 状态码， 响应头， 拿不到真正的数据
return res.json();
}).then(res => {
// 输出数据的位置
console.log(res)
}).catch(err => {
// 打印错误信息
console.log(err)
})
}
}
})
</script>Fetch应用
准备数据
首先找到一个小说网站接口，查看返回数据。
找到网站接口数据 复制下来 并格式化
保存到本地ebook.json文件中。
请求文件
创建fetch-ebook.html文件。使用fetch请求本地json文件。
文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
list-style: none;
}
</style>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleRequest">请求</button>
<ul>
<li v-for="item in datalist">
<div>
<img :src="item.cover" alt="" width="20px">{
{item.title}}
</div>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: "#box",
data: {
datalist: []
},
methods: {
handleRequest() {
fetch("./json/ebook.json")
.then(res => {
// 状态码， 响应头， 拿不到真正的数据
return res.json();
})
.then(res => {
// 赋值给变量
this.datalist = res.data.data
})
.catch(err => {
// 打印错误信息
console.log(err)
})
}
}
})
</script>
</body>
</html>效果：
点击后，渲染列表
注意：fetch 请求默认是不带cookie的，需要设置fetch(url, {credentials:’include’})
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 请求 - Fetch