Fetch

原生Fetch

fetch是基于Promise设计的，fetch是原生的，与XML同一级别。

fetch符合关注分离。 语法简介

原生fetch缺点(原生fetch非常拉跨，不建议使用)

1）fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。

2）fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: ‘include’})

3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费

4）fetch没有办法原生监测请求的进度，而XHR可以

Http拦截

fetch 默认不提供HTTP拦截功能。

下载进度

在fetch中跟踪下载进度，我们可以使用其中一个response.body属性，一个 ReadableStream 对象。它逐块提供主体数据，并允许我们计算时间消耗了多少数据。

使用

fetch与XML相比分的更加细致。分为两步请求

try {
      //第一步返回response对象,包含请求的网络信息(状态码等)，但是无法获取到后端的信息。
      //但第一步只有网络请求失败时才会被处理，即使状态码为400，500也会进行第二步
      const response= await fetch(`http://localhost:8081/users/login`,{
                method:'post',
                body: JSON.stringify(msg),
                headers:{
                   'Content-Type': 'application/json'
                },
            }) 
      //这在一步，可以通过 .json 方法获取后端的信息。（json是Response的原型上的方法,不是js的json）
      const data = await response.json();  
      //判断400，500 的错误在这里
      if(response.ok){
                //真正成功
            }else{
                //请求成功，接口错误(参数错误，密码错误)
                console.log(data.msg)
                showToast(data.msg)
            }
      console.log(data);
    } catch (error) {
    // 网络请求的错误在这里
      console.log('请求出错',error);
            showToast(error.msg)
    }

优秀框架

umi-request