导航
导航
文章目录
  1. fetch
    1. 比较XMLHttpRequest(传统Ajax)
    2. fetch语法
    3. GET请求
    4. POST请求
    5. 使用Fetch请求发送凭证
  2. 封装POST请求

Fetch学习笔记

前言: 前几天面试问到 Ajax和Fetch的区别,因为以前也用过这两个东西,所以也没难倒我,现在回头整理一遍。

fetch

与XMLHttpRequest(XHR)类似,fetch()方法允许你发出AJAX请求。区别在于Fetch API使用Promise,因此是一种简洁明了的API,比XMLHttpRequest更加简单易用。

如果还不了解Promise,可以移步👉浅谈Promise这篇博客

比较XMLHttpRequest(传统Ajax)

创建步骤:

  • 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  • 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  • 发送HTTP请求
  • 处理响应,获取异步调用返回的数据

可以发现,主要的不同点在于:传统Ajax使用事件处理器,而不是Promise对象,并且请求的发起完全依赖于xhr对象所提供的方法。

想详细了解 Ajax的封装可以查看我上一篇博客,一步步教你 Ajax的封装👉Ajax学习笔记

fetch语法

1
2
3
4
5
6
7
8
9
10
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
})
.catch(function(e) {
console.log("Oops, error");
});

使用 ES6 的 箭头函数

1
2
3
4
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))

使用 async/await 来做最终优化:

1
2
3
4
5
6
7
8
9
(async function () {
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
})();

使用 await 后,写异步代码就像写同步代码一样爽。await 后面可以跟 Promise 对象,表示等待 Promise resolve() 才会继续向下执行,如果 Promise 被 reject() 或抛出异常则会被外面的 try…catch 捕获。

如果还不了解async/await,可以移步👉es6Async这篇博客

GET请求

1
2
3
4
5
6
7
8
9
fetch(url, {
method: "GET", //默认
headers:{
"Accept": "application/json, text/plain, */*"
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))

POST请求

1
2
3
4
5
6
7
8
9
10
11
fetch(url, {
method: "POST",
headers: {
"Accept": "application/json, text/plain, */*",
"Content-type":"application:/x-www-form-urlencoded; charset=UTF-8"
},
body: "name=hzzly&age=22"
})
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))

使用Fetch请求发送凭证

要使用Fetch发送带有诸如cookie之类的凭证的请求。你可以在选项对象中将credentials属性值设置为“include”:

1
2
3
fetch(url,{
credentials: "include"
})

封装POST请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//将对象拼接成 name=hzzly&age=22 的字符串形式
function params(obj) {
let result = ''
for(let item in obj) {
result += `&${item}=${obj[item]}`
}
if(result) {
result = result.slice(1)
}
return result
}

function post(url, paramsObj) {
let result = fetch(url, {
methods: 'POST',
credentials: "include"
headers: {
"Accept": "application/json, text/plain, */*",
"Content-type":"application:/x-www-form-urlencoded; charset=UTF-8"
},
body: params(paramsObj)
})
return result
}

let obj = {
name: 'hzzly',
age: 22
}
post(url, obj)
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))