全面分析前端的网络请求方式

注意：源码里对错误的判定：

isSuccess = status >= 200 && status < 300 || status === 304; 

返回值除了这几个状态码都会进error回调。

dataType

"xml": 返回 XML 文档，可用 jQuery 处理。  
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。  
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载） 
 "json": 返回 JSON 数据 。  
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。  
"text": 返回纯文本字符串  

data

类型：String 使用JSON.stringify转码

complete

类型：Function 请求完成后回调函数 (请求成功或失败之后均调用)。

async

类型：Boolean 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

contentType

类型：String 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

键值对这样组织在一般的情况下是没有什么问题的，这里说的一般是，不带嵌套类型JSON，也就是 简单的JSON，形如这样：

{  
    a: 1,  
    b: 2,  
    c: 3  
}  

但是在一些复杂的情况下就有问题了。 例如在 Ajax 中你要传一个复杂的 json 对像，也就说是对象嵌数组，数组中包括对象，你这样传： application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON 组织成键值对形式。

{  
  data: {  
    a: [{  
      x: 2  
    }]  
  }  
}  

可以用如下方式传递复杂的json对象

$.ajax({  
    dataType: 'json',  
    contentType: 'application/json',  
    data: JSON.stringify({a: [{b:1, a:1}]})  
})  

七、jQuery的替代者

近年来前端MV*的发展壮大，人们越来越少的使用jQuery，我们不可能单独为了使用jQuery的Ajax api来单独引入他，无可避免的，我们需要寻找新的技术方案。

尤雨溪在他的文档中推荐大家用axios进行网络请求。axios基于Promise对原生的XHR进行了非常全面的封装，使用方式也非常的优雅。另外，axios同样提供了在node环境下的支持，可谓是网络请求的首选方案。

未来必定还会出现更优秀的封装，他们有非常周全的考虑以及详细的文档，这里我们不多做考究，我们把关注的重点放在更底层的APIfetch。

Fetch API 是一个用用于访问和操纵HTTP管道的强大的原生 API。

这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。

可见fetch是作为XMLHttpRequest的替代品出现的。

使用fetch，你不需要再额外加载一个外部资源。但它还没有被浏览器完全支持，所以你仍然需要一个 polyfill。

八、fetch的使用

一个基本的 fetch请求：

const options = {  
    method: "POST", // 请求参数  
    headers: { "Content-Type": "application/json"}, // 设置请求头  
    body: JSON.stringify({name:'123'}), // 请求参数  
    credentials: "same-origin", // cookie设置  
    mode: "cors", // 跨域  
}  
fetch('http://www.xxx.com',options)  
  .then(function(response) {  
    return response.json();  
  })  
  .then(function(myJson) {  
    console.log(myJson); // 响应数据  
  })  
  .catch(function(err){  
    console.log(err); // 异常处理  
  })  

（编辑：衡阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!