1、fetch()接口
XMLHttpRequest的问题
- 所有的功能全部集中在同一个对象上,容易书写出混乱不易维护的代码
- 采用传统的事件驱动模式,无法适配新的 Promise Api
Fetch Api 的特点
- 并非取代 AJAX,而是对 AJAX 传统 API 的改进
- 精细的功能分割:头部信息、请求信息、响应信息等均分布到不同的对象,更利于处理各种复杂的 AJAX 场景
- 使用 Promise Api,更利于异步代码的书写
fetch()
基本使用
参数:
1、资源的路径,必填项
2、请求头的配置对象,可以选填。
返回值:
无论请求成功与否,它都返回一个 Promise
对象
- 当收到服务器的返回结果后,
Promise
进入resolved
状态,状态数据为Response
对象 - 当网络发生错误(或其他导致无法完成交互的错误)时,
Promise
进入rejected
状态,状态数据为错误信息
(1)基础用法
function getDatas(){
const url = "..."
const pro = fetch(url)
pro.then(resp=>{
//只要没报错 ,状态是200还是404都是进入resolve钻沟通
console.log(resp)
}).catch(error=>{
console.log(error)
})
}
(2)升级版的基础用法
function getDatas(){
const url = "..."
pro = fetch(url)then(resp=>{
//只要没报错 ,状态是200还是404都是进入resolve钻沟通
console.log(resp)
}).catch(error=>{
console.log(error)
})
}
(3)用async
和await
的fetch
async function getDatas(){
const url = "..."
const config = {}
try {
const resp = await fetch(url,config)
const result = await resp.json()
console.log(result)
} catch (error) {
console.log(error)
}
}
补充:请求配置对象
- method:字符串,请求方法,默认值GET
- headers:对象,请求头信息
- body:请求体的内容,必须匹配请求头中的 Content-Type
- mode:字符串,请求模式
- cors:默认值,配置为该值,会在请求头中加入 origin 和 referer
- no-cors:配置为该值,不会在请求头中加入 origin 和 referer,跨域的时候可能会出现问题
- same-origin:指示请求必须在同一个域中发生,如果请求其他域,则会报错
- credentials:如何携带凭据(cookie)
- omit:默认值,不携带cookie
- same-origin:请求同源地址时携带cookie
- include:请求任何地址都携带cookie
- cache:配置缓存模式
- default:表示fetch请求之前将检查下http的缓存.
- no-store:表示fetch请求将完全忽略http缓存的存在. 这意味着请求之前将不再检查下http的缓存, 拿到响应后, 它也不会更新http缓存.
- no-cache:如果存在缓存, 那么fetch将发送一个条件查询request和一个正常的request, 拿到响应后, 它会更新http缓存.
- reload:表示fetch请求之前将忽略http缓存的存在, 但是请求拿到响应后, 它将主动更新http缓存.
- force-cache:表示fetch请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 除非没有任何缓存, 那么它将发送一个正常的request.
- only-if-cached:表示fetch请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 如果没有缓存, 它将抛出网络错误(该设置只在mode为”same-origin”时有效).
2、Request 对象
除了使用基本的fetch方法,还可以通过创建一个Request对象来完成请求(实际上,fetch的内部会帮你创建一个Request对象。
new Request(url地址, 配置)
Request对象属性(只读):
- method:包含请求的方法 (GET, POST, 等.)
- url:包含这个请求的URL。
- headers:包含请求相关的Headers对象。
- context:包含请求的上下文(例如:audio, image, iframe, 等)
- referrer:包含请求的来源 (例如:client)。
- mode:包含请求的模式 (例如: cors, no-cors, same-origin, navigate).
- redirect:包含如何处理重定向模式,它可能是一个 follow ,error或者manual。
- cache:包含请求的缓存模式 (例如: default, reload, no-cache).
Request对象方法:
- clone():创建当前request的副本。
简单举例:
const req = new Request('http://localhost/a');
const url = req.url; // http://localhost/a
const method = req.method; // GET
const cred = req.credentials; // omit
注意点:尽量保证每次请求都是一个新的Request对象
function getRequestInfo(){
const url = "..."
const config = {
method:"get",
headers:{
"Content-Type":"application.json"
}
}
return new Request(url,config)
}
async function getDatas(){
try {
const req = getRequestInfo()
const resp = await fetch(req)
const result = await resp.json()
console.log(result)
} catch (error) {
console.log(error)
}
}
getProvince()
3、Response 对象
Response对象属性:
- ok:boolean,当响应消息码在200~299之间时为true,其他为false
- status:number,响应的状态码
- url:返回的url
Response对象方法:
- text():用于处理文本格式的 Ajax 响应。它从响应中获取文本流,将其读完,然后返回一个被解决为 string 对象的 Promise。
- blob():用于处理二进制文件格式(比如图片或者电子表格)的 Ajax 响应。它读取文件的原始数据,一旦读取完整个文件,就返回一个被解决为 blob 对象的 Promise。
- json():用于处理 JSON 格式的 Ajax 的响应。它将 JSON 数据流转换为一个被解决为 JavaScript 对象的promise。
- redirect():可以用于重定向到另一个 URL。它会创建一个新的 Promise,以解决来自重定向的 URL 的响应。
const respone = new Response(
`{"id":1,"name":"北京"},{"id":2,"name":"山东"}`,
{
ok:true,
status:200
})
4、Headers 对象
Headers 接口允许您对HTTP请求和响应头执行各种操作。在Request和Response对象内部,会将传递的请求头对象,转换为Headers
const headers = new Headers({})
Headers对象方法:
- has(key):检查请求头中是否存在指定的key值
- get(key): 得到请求头中对应的key值
- set(key, value):修改对应的键值对
- append(key, value):添加对应的键值对
- keys(): 得到所有的请求头键的集合
- values(): 得到所有的请求头中的值的集合
- entries(): 得到所有请求头中的键值对的集合
console.log(req.headers.has("Content-Type"))
console.log(req.headers.get("Content-Type"))
console.log(req.headers.set("Content-Type","application/json"))
5、文件上传
请求方法:POST
请求的表单格式:multipart/form-data
请求体:必须包含一个键值对,键的名称是服务器要求的名称,值是文件数据
HTML5中,JS仍然无法随意的获取文件数据,但是可以获取到input元素中,被用户选中的文件数据
可以利用HTML5提供的FormData构造函数来创建请求体
async function upload(files = []){
//files [{key:key,value:value}]
if(files.length===0) return
const url = "..."
const formData = new FormData();//构建请求题
for (const item of files) {
formData.append(item.key,item.value)
}
const resp = await fetch(url,{
method:"post",
headers:{
"Content-Type":"multipart/form-data"
},
body:formData//可以省略请求头,会自动修改为multipart/form-data
})
const result = await resp.json()
}