前端网络请求都有哪些方式？webSocket 是什么？

对原生网络知识一直没系统学习，花了些时间把 《JavaScript 高级程序设计》看了一遍，发现这本书翻译的不是很好，有些看起来很生硬，只能中英文对照看了，而《你不知道的JavaScript》看起来更舒服。 

这道题目主要考察对前端网络请求知识点的掌握，能够对各种请求的优缺点能够了如指掌掌握，并能够对开源库 axios 的原理了如指掌。

前端中提供的原生网络请求有如下几种：

• XMLHTTPRequest Leval1

IE5 首次提出了 XMLHTTPRequest， 它实现了 ajax（Asynchronous JavaScript XML），可以在不刷新页面的情况下更新 web 页面中的内容，也就是一种局部更新策略。XMLHTTPRequest 的出现让 ajax 这种技术走向了成熟。

// 同步请求
function requestSyncWithXHR1() {
    let xhr = new XMLHttpRequest();
    // 准备发起请求
    xhr.open('get', '/api/user', false);
    // 立即发起请求
    xhr.send(null);
    // 获取 xhr 的状态码
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        alert(xhr.responseText);
    }
    else {
        alert('request error: ' + xhr.status);
    }
}

// 异步请求
function requestAsyncWithXHR1() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = e => {
        if (xhr.readyState === 4) {
            // 获取 xhr 的状态码
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                alert(xhr.responseText);
            }
            else {
                alert('request error: ' + xhr.status);
            }
        }
    };
    // 异步请求
    xhr.open('get', '/api/user', true);
    xhr.send(null);
}

• XMLHTTPRequest Leval2

XMLHTTPRequest 成为了 W3C 标准，所有浏览器都支持该特性，同时对 Leval1 进行了扩展，支持了：

a、支持了 FormData，更容易地序列号表单数据；

b、添加了 onload 事件，监听网络请求完成；

c、添加了 onprogress 事件，可见听数据接收的进度；

d、添加了 timeout 机制

function requestAsyncWithXHR2() {
    let xhr = new XMLHttpRequest();
    // 设置超时时间
    xhr.timeout = 5000;
    // 设置 HTTP Header
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function(e) {
        // 获取 xhr 的状态码
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            alert(xhr.responseText);
        }
        else {
            alert('request error: ' + xhr.status);
        }
    };
    // 监听进度，比如监听文件上传进度
    xhr.onprogress = function(e) {

    };
    xhr.open('post', '/user/add', true);
    // post 请求的 body
    let formData = new FormData();
    formData.set('name', 'suyan');
    formData.set('pwd', '123suyan');
    xhr.send(formData);
}

• Fetch API

这是一种更现代的 API，具有以下特点：

• 可以应用于工作线程，比如 web worker，而 XMLHTTPRequest 只能在主线程执行；

• 使用起来更简单，更现代；

• 返回为 Promise；

• 只支持异步，而 XMLHTTPRequest 可支持同步和异步

• 兼容性不好，IE浏览器压根不能用

• 提供了 Request、Response、Header 对象，使用起来更友好

• 读取 body 有多种方式 text、formdata、arrayBuffer、blob

function requestWithFetch() {
    const header = new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    });
    fetch('/add/user', {
        method: 'POST',
        body: JSON.stringify({
            name: 'suyan'
        }),
        headers: header
    }).then(res => {
        if ((res.status >= 200 && res.status < 300) || res.status === 304) {
            alert('success!')
        }
        else {
            alert('error: ' + res.status);
        }
    })
}

• Beacon API

Beacon，汉语意思信标，这种与前面几种都不一样，它是为了满足离开页面时可以发起的一种请求。比如统计网页使用情况，通常在 unload 中发送网络请求，但是发送异步请求时，一旦页面退出，网络请求就会被取消，如果发送同步请求，影响用户体验，而 Beacon API 可以保证及时页面关闭，浏览器仍然会发起请求。

特点：

• 可以在任意地方使用；

• 页面即使关闭，也会发起请求；

• 发起请求无法干预，也不能监听其结果；

• 发起请求会带有 cookie 信息；

function beaconApi() {
    navigator.sendBeacon('https://lefex.gitee.io/', '{name: "suyan"}');
}

• websocket

它是一种长连接，客户端和服务端直接都可以发送和接收消息。

function websocket() {
    let socket = new WebSocket("ws://lefex.gitee.io/server.php");
    socket.onopen = function() {
        // socket open
    };
    socket.onerror = function() {
        // socket error
    };
    socket.onclose = function() {
        // socker close
    };
    let stringData = "suyan nihao";
    // 发送消息
    socket.send(stringData);
    let buffer = Uint8Array.from([1, 2, 3]);
    socket.send(buffer);
    // 接收到消息
    socket.onmessage = function(e) {
        let data = e.data;
    }
}

大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/