fetch() 方法是一个window的全局方法，用于发起获取资源的请求。它返回一个promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。

1.fetch发送Get请求

Fetch是一种现代的数据网络请求 API，它旨在解决 XHR 的一些问题，提供了更强大、更灵活的方式来处理 HTTP 请求。可以理解为XMLHttpRequest的升级版。

fetch有以下特征：

• Promise 风格：Fetch API 使用 Promise 对象来处理异步请求，使代码更具可读性和可维护性。
• 更简单的语法：相较于 XHR，Fetch API 的语法更加简单明了，通常只需要几行代码来完成请求。
• 默认不接受跨域请求：为了安全性，Fetch API 默认不接受跨域请求，但可以通过 CORS（跨域资源共享）来进行配置。
• 更现代的架构：Fetch API 是建立在 Promise 和 Stream 之上的，支持更灵活的数据处理和流式传输。

fetch方法的then会接收一个Response实例，值得注意的是fetch方法的第二个then接收的才是后台传过来的真正的数据，一般第一个then对数据进行处理等。

fetch('url',{
     //请求方法
     method:'GET',
     //请求头
     headers:{},
}).then().then()

GET请求可以简写如下：

fetch('url').then().then()

实例：

function sendGetRequest() {
        /*
        fetch('https://www.simoniu.com/commons/items/130', {
            //请求方法
            method: 'GET',
            //请求头
            headers: {},
        }).then(resp => {
                console.log(resp)
                return resp.json();
            }
        ).then(result => {
            console.log(result);
        }).catch(err => {
            console.log(err)
        })*/

        fetch('https://www.simoniu.com/commons/items/130').then(resp => {
                console.log(resp)
                return resp.json();
            }
        ).then(result => {
            console.log(result);
        }).catch(err => {
            console.log(err)
        })
    }

2.fetch发送Post请求

fetch请求post格式：

fetch('url',{
     //请求方法
     method:'POST',
     //请求头
     headers:{},
     //请求体
     body:{}
}).then().then()

实例：

 function sendPostRequest() {
        fetch('https://www.simoniu.com/commons/address/', {
            method: 'post',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                "uid": 22,
                "realname": "tester",
                "mobile": "137726577889",
                "province": "河南省",
                "city": "郑州市",
                "zone": "金水区",
                "street": "金水大道33号"
            })
        }).then((response) => response.json())
            .then((response) => {
                console.log(response)
            }).catch(err => {
            console.log(err)
        })
 }

3.XHR和fetch对比

fetch和XHR都是前端获取远端数据的方式。它们之间有什么区别吗？

其元素能力的对比如下图所示：

常用库和插件

基于XHR封装的库 - jquery：一个 JavaScript 库，提供了用于处理 DOM 操作、事件处理和 XHR 请求的便捷方法。 - axios：一个流行的 HTTP 请求库，基于 XHR 开发，支持浏览器和 Node.js。

基于 fetch 封装的库 - redaxios：它具有与 axios 类似的 API，但更轻量级且适用于现代 Web 开发。 - umi-request：由 Umi 框架维护的网络请求库，提供了强大的拦截器、中间件和数据转换功能。

小结：

XMLHttpRequest (XHR) 和 Fetch API 都是前端开发中用于进行数据请求的有力工具。XHR 在传统项目中仍然有用，而 Fetch API 则在现代 Web 开发中越来越流行。具体选择哪个工具取决于项目的需求和开发团队的偏好。