前端开发中网络请求方式汇总

我们去聊前端开发，就绕不过网络请求，可以说网络请求支撑起来了前端的半边天，因为有网络数据的交互，才使得我们的网页变得更加“灵活”起来了，让我们的网站能及时反馈数据给用户。本篇文章主要介绍在前端开发中，我们常用的几种网络请求方式，首先来了解下常用的网络请求方式有哪几种：

• ajax请求
• axios请求
• fetch请求
• xhr原生请求
• websocket请求

Ajax请求

ajax是由Jquery库提供的一种网络异步请求方法，通过ajax我们可以快速获取后端请求数据，并将其包装输出到页面元素上。请原理实现还是通过xhr封装请求服务器，通过服务器返回数据进行DOM渲染，我找到一个比较能描述的流程图像。

基础使用

# 格式
$.ajax({name:value, name:value, ... }) // 可以直接传入url 


# 使用示例
$.ajax({
    url:"http://api.mediastack.cn/base/captcha",
    dataType:"json",
    error:function(error){
         console.log("get catch error:",error)
    },
    success:function(result){
        // 后台成功返回
        console.log("get result:",result)
    }
});

ajax请求的字典值支持如下：

• url：字符串，请求的url。
• async：布尔值，表示请求是否异步处理。默认是 true。
• beforeSend(xhr)：发送请求前回调函数。
• data：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面。
• dataType：字符串类型， 预期服务器返回的数据类型。如：
  • xml：返回 XML 文档
  • html：返回纯文本 HTML 信息
  • script：把响应的结果当作 JavaScript 执行。
  • json：把响应的结果当作 JSON 执行，并返回一个JavaScript对象。
  • jsonp： 以 JSONP 的方式载入 JSON 数据块。会自动在所请求的URL最后添加 “?callback=?“。
  • text：返回纯文本字符串。
• context：这个对象用于设置Ajax相关回调函数的上下文。
• converters ：一个数据类型到数据类型转换器的对象。每个转换器的值是一个函数，返回经转换后的请求结果。默认为{"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}
• crossDomain：如果你想在同一域中强制跨域请求（如JSONP形式），例如，想服务器端重定向到另一个域，那么需要将crossDomain设置为 true 。默认同域请求为false， 跨域请求为true。
• contentType：发送信息至服务器时内容编码类型。默认值是”application/x-www-form-urlencoded; charset=UTF-8“，适合大多数情况。
• complete：请求完成后回调函数 (请求success 和 error之后均调用)。这个回调函数得到2个参数： jqXHR (在 jQuery 1.4.x中是 XMLHTTPRequest) 对象和一个描述请求状态的字符串("success", "notmodified", "error", "timeout", "abort", 或者 "parsererror") 。
• cache：布尔类型，默认为true.如果设置为 false ，浏览器将不缓存此页面。
• accepts：内容类型发送请求头（Content-Type），用于通知服务器该请求需要接收何种类型的返回结果。
• error：函数类型，请求失败时调用此函数。有以下三个参数：jqXHR (在 jQuery 1.4.x前为XMLHttpRequest) 对象、描述发生错误类型的一个字符串 和 捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "abort" ，和 "parsererror"。 当一个HTTP错误发生时，errorThrown 接收HTTP状态的文本部分，比如： “Not Found”（没有找到） 或者 “Internal Server Error.”（服务器内部错误）。
• jsonp：字符串类型，在一个jsonp请求中重写回调函数的名字。这个值用来替代在”callback=?“这种GET或POST请求中URL参数里的”callback“部分，比如{jsonp:'onJsonPLoad'}会导致将”onJsonPLoad=?"传给服务器。
• jsonpCallback：为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成一个独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。
• mimeType：一个mime类型用来覆盖XHR的 MIME类型。
• success：请求成功后的回调函数。这个函数传递3个参数：从服务器返回的数据，并根据dataType参数进行处理后的数据，一个描述状态的字符串;还有 jqXHR（在jQuery 1.4.x前为XMLHttpRequest） 对象 。
• timeout：设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup() 里的全局设置。
• type：请求方式 (“POST” 或 “GET“)， 默认为 “GET“。

Axio请求

Axio是一个基于Promise的网络请求库，同时适配于浏览器端和服务端（nodejs）。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

安装

$ npm install axios # 或者使用yarn 
$ yarn add axios

通过CDN加载：

<!--jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<!--unpkg CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

示例

axios.request({
      url:'/article/home/index',
      method:'get',
      baseURL:'http://test.mediastack.cn/'
}).then(
     res => {
     console.log("get res:",res);
     var str=JSON.stringify(res);
     document.getElementById("content").innerHTML = str;
},error => {
     console.log("get request failed:",error);
     document.getElementById("content").innerHTML = error;
  }
);

具体使用方式，可参考React应用中封装axios。

fetch请求

fetch API提供了一个标准的js接口，优化http请求和响应的操作方式，fetch提供了一种极简单的方式来进行异步跨域获取资源，和axios类似的是其依托Promise，通过返回Promise对象实现了请求的异步。如下为fetch常见使用示例：

        var url = "https://mock.yonyoucloud.com/mock/16388/test/cities";
        fetch(url, {
            method: "GET",
            mode: 'cors',
            cache: 'default'
        }).then(function(response){
            return response.json(); //响应内容json化
        }).then(function(res){
            console.log(res);  //打印响应值
        })

如上，配置参数支持如下：

• method: 请求方法，如 GET、POST、PUT、DELETE。默认GET。
• headers: 请求头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。比如：headers : { 'Content-Type' : 'application/json' }，可以设置所有的header信息。
• body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
• mode: 请求的模式，如 默认cors跨域、 no-cors不跨域 或者 same-origin。
• credentials: 请求的 credentials，如 默认omit不携带cookie、same-origin同源携带cookie 或者 include跨域携带cookie。但在Chrome中，Chrome 47 之前的版本默认值为 same-origin ，自Chrome 47起，默认值为include。
• cache: 请求的 cache 模式: default、 no-store不缓存、 reload 、 no-cache有缓存但仍需要去服务器获取资源 、 force-cache 或者 only-if-cached 。
• redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误）, 或者 manual (手动处理重定向). 在Chrome中默认使用follow（Chrome 47之前的默认值是manual）。
• referrer： 一个 USVString 可以是 no-referrer、client或一个 URL。默认是 client。
• referrerPolicy: 指定了HTTP头部referer字段的值。可能为以下值之一：
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url

XHR原生请求

xhr请求是浏览器端网络请求的基础，我们现在常用的所有网络请求框架都是基于xhr实现的二度封装，接下来，我们来了解下不用网络框架如何使用xhr实现前端的网络请求。代码示例如下：

// 创建 XHR 对象
const xhr = new XMLHttpRequest();
// 监听 onreadystatechange 事件
xhr.onreadystatechange = () => {
     if (xhr.status == 200 && xhr.readyState == 4) {
         console.log('请求成功', xhr.responseText);
     }
};
// 调用 open 函数
xhr.open('POST', 'http://localhost:8080/login', true);

// post 请求时,设置请求头 Content-Type
// 用于指定请求参数，以什么样的格式发送给后端,告诉服务器，我前端发送的请求参数是什么类型的。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// 调用 send 函数
xhr.send('a=100&b=200');

如上，通过onreadystatechange监听的回调函数获取返回数据。

websocket请求

websocket网络请求与上述其他网络请求方式不同，上述其他请求基本都是基于http协议实现的单次请求，而websocket是通过socket实现的前后端的长连接网络请求，一般适用于实时性要求高的功能需求，如我们常见的在线聊天室、实时推送等。

let ws = new WebSocket(url)

ws.onopen = function () {
  // 指定连接成功后的回调函数
}         
ws.onclose = function () {
  // 指定连接关闭后的回调函数
}         
ws.onmessage = function () {
  // 指定收到服务器数据后的回调函数
}         
ws.onerror = function () {
  // 指定报错时的回调函数
}

ws.send(message)  向服务器发送数据
ws.close()  关闭当前连接

有关websocket更加详细的介绍可参考：前端开发之websocket