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

前言

这道题目主要考察对前端网络请求知识点的掌握,能够对各种请求的优缺点能够了如指掌掌握,并能够对开源库 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;
    }
}

转载于:https://lefex.github.io/bat/network/1.html

扒皮猴社区版权所有,转载请标注出处!
扒皮猴 » 前端网络请求都有哪些方式?webSocket 是什么?

发表评论