胖蔡说技术
随便扯扯

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

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

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

Ajax请求

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

图1.1 ajax原理图

基础使用

# 格式
$.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=?“这种GETPOST请求中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

图 1.2 axios

安装

$ 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不携带cookiesame-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中默认使用followChrome 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

赞(2) 打赏
转载请附上原文出处链接:胖蔡说技术 » 前端开发中网络请求方式汇总
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏