关于Promise和fetch的使用

最新推荐文章于 2024-05-24 09:41:45 发布

陈Joys

最新推荐文章于 2024-05-24 09:41:45 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/m0_55861837/article/details/123614231

版权

Promise

一般来说promise是一个工厂函数，其调用的resolve,reject,all,race 这些方法称之为工厂方法。

通常我们构造一个函数我们用 new ，但是如果我们有特殊需求的时候，就会用到工厂模式,一个构造工厂.

fetch

fetch的优势

fetch是浏览器提供的，是浏览器支持的，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

fetch是一个让我们处理http pipeline更容易的工具，

http pipeline是什么
在HTTP1.1之前是一个请求发出去一个请求回来，才会继续下一个，时间浪费在服务端和客户端之间通信。
开启这个，就会请求发送和返回是自己顾自己的，请求一个一个发过去，一个一个回来，也就是说你只管发，然后接只管接，前提就是server有额外处理的能力。

fetch的返回是一个promise

resolve 发生在网络通信正常（404,500也是resolve）
reject 发生在网络通信异常

当只有在网络通信出现问题的时候才会放回reject，在其他情况下我们都是返回resolve，并且网络波动发生错误是我们不能直接干预的，一般情况网络波动的状态码会自己返回。

fetch发送请求，默认是不发送cookie的（需要手动进行设置）

fetch的使用

基本使用

fetch('www.dev.com')
  .then(response => response.json())
  .then(data => console.log(data));

fetch 的基本参数

//url 请求的地址 init 对你请求发出的一些基本配置，初始化
fetch('url',init)

init就是内容里写请求的方法，请求的请求头，和请求体的编写。

使用

fetch('www.dev.com',{
medth:'POST',
headers:{
 'Content-Type': 'application/json'
}，
body:JSON.stringify(data) 
})
.then(resp=>resp.json())
.then(data => console.log(data))

headers里面的内容一般请求头上有的都可以使用。

注意：mode: "no-cors" 仅允许使用一组有限的 HTTP 请求头：

Accept
Accept-Language
Content-Language
Content-Type 允许使用的值为：application/x-www-form-urlencoded、multipart/form-data 或 text/plain

发送带有cookie的请求

fetch('www.dev.com',{
credentials: 'include'
})
.then(resp=>resp.json())
.then(data => console.log(data))

medth 不写就是代表GET请求

fetch带来的便利

1.因为fetch是浏览器支持的，所以我们是可以直接在浏览器的控制台里使用，

来重新请求该失败的请求

可以看到，这里其实是可以在控制台里直接发送，而且返回是一个promise，

其实这里请求一个报错的，

因为我是在百度下面请求百度,因为百度里面并没有百度这个url

请求'/'就是重新请求当前网页。

2.因为fetch请求是一个公共的浏览器标准，都可以使用

不用去请求一个库在去用里面的请求方法，而是可以直接使用fetch请求。

应对不稳定的网络环境-指数补偿
按照指数的时间倍数重复发送请求
0ms
200ms
400ms
800ms
1600ms
3200ms
fail
如果我们在0ms发一个请求，200ms没回来，我们就会继续发，如果200ms发出，到400ms还没回来，那么就在发如果到800之前200ms的请求回来，那么就不发了，如果3200ms还没回来那就认为网络断开了