Web全栈探索，Vue基础系列，前后端交互（二）
Fetch
fetch = ajax + Promise
- fetch默认是get请求
- Fetch API是新的ajax解决方案 Fetch会返回Promise
- fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象
1.入门程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
Fetch API 基本用法
第二个参数 method 表示请求方法
因为默认是 get 所以第二个参数可以省略
*/
fetch('http://10.5.34.66:8104/test/getInfo', {method: 'get'})
.then(function(data){
// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
return data.text();
})
.then(function(data){
alert(data);
})
</script>
</body>
</html>
2.利用 Fetch 进行 get、post、put、delete 请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
Fetch API 调用接口传递参数
*/
GET参数传递-传统URL
fetch('http://10.5.34.66:8104/temp?id=1', {
method: 'get'
})
.then(function(data){
return data.text();
})
.then(function(data){
console.log(data)
});
// GET参数传递-restful形式的URL
fetch('http://10.5.34.66:8104/temp/1', {
method: 'get'
})
.then(function(data){
return data.text();
})
.then(function(data){
console.log(data)
});
// DELETE请求方式参数传递
fetch('http://10.5.34.66:8104/temp', {
method: 'delete'
})
.then(function(data){
return data.text();
})
.then(function(data){
console.log(data)
});
// POST请求传参
// 第一种传参方法
fetch('http://10.5.34.66:8104/huhaitest', {
method: 'post',
body: 'id=3&name=xiaoli',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function (data) {
return data.text();
})
.then(function (data) {
console.log(data)
});
// POST请求传参
// 第二种传参方法
fetch('http://10.5.34.66:8104/temp', {
method: 'post',
body: JSON.stringify({
id: '4',
name: 'xiaohong'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function (data) {
return data.text();
})
.then(function (data) {
console.log(data)
});
// PUT请求传参
fetch('http://10.5.34.66:8104/temp', {
method: 'put',
body: JSON.stringify({
id: '5',
name: 'xiaoqiang'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data){
return data.text();
})
.then(function(data){
console.log(data)
});
</script>
</body>
</html>
3.fetchAPI 中的响应格式
用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如 JSON ， BLOB 或者TEXT 等等
- text() ===> 将返回体处理成字符串类型
- json() ===> 返回结果和JSON.parse(responseText) （把字符串转成JSON对象）格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
Fetch响应结果的数据格式
*/
// 方法一
fetch('http://10.5.34.66:8104/temp/1').then(function(data){
//将返回的结果转成字符串格式
return data.text();
}).then(function(data){
// 直接 输出返回的结果
alert(data)
})
// 方法二
fetch('http://10.5.34.66:8104/temp/1').then(function(data){
//将返回的结果转成字符串格式
return data.text();
}).then(function(data){
// 里哟个 parse 函数将字符串转变为 JSON 对象
// 因为是对象，所以可以用 .成员变量方式获取
let obj = JSON.parse(data);
alert(obj.name)
alert(obj.id)
})
// 方法三
fetch('http://10.5.34.66:8104/temp/1').then(function(data){
// 将返回结果直接转变为 JSON 格式
return data.json();
}).then(function(data){
// 因为返回的是 JSON 对象，所以可以直接用以下方式访问
alert(data.name)
alert(data.id)
})
// 方法四
fetch('http://10.5.34.66:8104/temp/1').then(function(data){
// 将返回结果直接转变为 JSON 格式
return data.json();
}).then(function(data){
// 将 JSON 对象转为 字符串格式
let obj = JSON.stringify(data)
alert(obj)
})
</script>
</body>
</html>
