fetch学习总结

最新推荐文章于 2024-11-05 14:21:06 发布

转载最新推荐文章于 2024-11-05 14:21:06 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ac33f50518825557b4cf111

文章标签：

#json

自我学习记录（一直会更新?）未完待续。。。。

先来回答一个问题：除了Ajax获取后台数据之外，还有没有其他的替代方案？    
答：fetch
复制代码

request

fetch(input, init) // 这个方法接受两个参数： 
复制代码

参数	说明
input	定义要获取的资源。包含要获取资源的 url
init	这个参数是可选的，它传入一个配置项对象，可以用它来包括所对请求进行设置

配置如下：

method: 请求使用的方法，如 GET、POST。
headers: 请求的头信息，形式为 Headers 对象或 ByteString。

参数	说明（指定提交方式）
'Content-Type': 'application/json'
'Content-Type': 'application/x-www-form-urlencoded'	指定提交方式是表单提交

body: 请求的 body 信息，可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。（如果是 GET 或 HEAD 方法，则不能包含 body 信息）
mode: 请求的模式，主要用于跨域设置，如 cors、 no-cors 或者 same-origin。

参数	说明
cors	跨域
no-cors	不跨域
same-origin	同源

credentials: 需要向服务器发送cookie时设置，如 omit、same-origin 或者 include。

参数	说明
omit`默认`	忽略的意思，也就是不带cookie
same-origin	意思就是`同源请求`带cookie
`include`	表示`无论跨域还是同源`请求都会带cookie

cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached。

如果遇到不会的，可以参考vuemao-csr上的fetch

// fetch post
fetch('url', {
    method: 'POST',
    headers: {
       'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
    },
    credentials: 'include', // 请求都带cookie
    body: querystring.stringify(param)
  }).then((res)=>{
    return res.text()
  }).then((res)=>{
    console.log(res)
  })
复制代码

// fetch get
fetch('url', {
    credentials: 'include', // 请求都带cookie 
}).then((res) => {
    return res.json()
}).then((res) => {
    console.log(res)
})
复制代码

参考，个人很喜欢