异步请求- 聊聊 xhr与 fetch区别

// 聊聊 浏览器使用 fetch（promise风格） 发送请求
    /**
     * 网络请求：
     *  xhr：
     *     ajax（xhr封装）
     *     axios（promise风格）
     *  
     * xhr：请求分为 3个阶段
     *      1、发送请求
     *      2、请求成功或失败
     *      3、成功则接收数据，失败则返回失败原因
     * 
     *  fetch：（promise风格）
     * 
     *  fetch:特点 使用了 关注分离设计思想（设计模式）
     *  将请求分为 4个阶段
     *      1、发送请求
     *      2、检查是否联系上服务器
     *      3、请求成功或失败
     *      4、成功则接收数据，失败则返回失败原因
     */

	//fetch 封装
	send = () =>{
        return async (e) =>{
            const url = "http://localhost:3000/students";
            if (e.keyCode === 13) {
            let { value } = e.target;
				
				//简单写法
                fetch(url).then(
                    response =>{
                        console.log('联系服务器成功');
                        return response.json()
                    },
                    Error =>{console.log('联系服务器失败',Error);},
                ).then(
                    Response =>{console.log('数据请求成功',Response);},
                    Error =>{console.log('数据请求失败',Error);}
                )

                // 小小优化
                fetch(url).then(
                    response =>{
                        console.log('联系服务器成功');
                        return response.json()
                    },
                    Error =>{
                        console.log('联系服务器失败',Error);
                        // 如果联系服务器失败就不执行后面的then（）内容
                        return new Promise(()=>{})
                    },
                ).then(
                    Response =>{console.log('数据请求成功',Response);},
                    Error =>{console.log('数据请求失败',Error);}
                )

                // 进一步优化
                fetch(url).then(
                    response =>{
                        console.log('联系服务器成功');
                        return response.json()
                    }
                ).then(
                    Response =>{console.log('数据请求成功',Response);},
                ).catch(error =>{
                    console.log('请求失败',error);
                })

                // 使用 async await 优化
                try {
                    let response = await fetch(url);
                    let data = await response.json();
                    console.log(data);
                } catch (error) {
                    console.log('请求失败',error);
                }
                



            }
        } 
    }