fetch与ajax的区别

Posted wangziqiang123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了fetch与ajax的区别相关的知识，希望对你有一定的参考价值。

一. Fetch是 window 下面的一个方法
Fetch写法：
1
2
3
4
5
6
7
8
9
10
11
12
fetch('url'，
    methods:'get'
)
.then(function(res)
    return 
)
.then(function()
    return // 执行成功第二步
)
.catch(function(err)
    //异常报错
)
Fetch 常见处理:

html

1
2
3
4
5
6
7
fetch('/user.html')
.then(function(res)
    return res.text();
)
.then(function(body)
    document.body.innerHTML = body;
)

JSON 

1
2
3
4
5
6
7
8
fetch('/users.json')
.then(function(response) 
    return response.json()
).then(function(json) 
    console.log('parsed json', json)
).catch(function(ex) 
    console.log('parsing failed', ex)
)

Post form

1
2
3
4
5
6
7
8
9
10
11
12
13

var form = document.querySelector('form');

fetch('/user',
    method:'POST',
    headers:
        'Content-Type':'application/json'
    ,
    body:JSON.stringify(
        name:'fetch',
        login:'fetct'
    )
)

File upload

1
2
3
4
5
6
7
8
9
10
var input = document.querySelector('input[type="file"]')

var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')

fetch('/avatars', 
  method: 'POST',
  body: data
)

….
等等

二.Ajax
定义：
AJAX全称“Asynchronous javascript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。本质是使用XMLHttpRequest 来请求数据。
举个栗子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function (options)
		options = options || ;
		options.type = (options.type || "get").topUpperCase();
		options.dataType = options.dataType || "json";
	var params = formatParams(options.data);

	if(window.XMLHttpRequest)//创建xhr
		var xhr = new XMLHttpRequest();
	else
		var xhr = ActiveXObject('Microsoft.XMLHTTP');
	


//接收
xhr.onreadystatechange=function()
	if(xhr,readyState == 4)
		var status = xhr.status;
		if(status >= 200 && options.success(xhr.responseText,xhr.responseXML))
			options.success && options.success(xhr.responseText,xhr.responseXML);
		else
			options.fail && options.fail(status);
		
	

//连接发送
if(options.type =="GET")
	xhr.open("GET",option.url+"?"+params,true);
	xhr.send(null);
else if(options.type =="POST")
	xhr.open("POST",options.url,true);
	xhr.setRequestHeader("Content-Type","application/x-www-form-urllencoded");
	xhr.send(params);

//格式化参数
function formatParams(data)
	var arr=[];
	for (var name in data) 
		arr.push(encodeURLCompontent(name)+"="+encodeURLCompontent(data[name]));
	
	arr.push(("v="+Math.random()).replace(".",""));
	return arr.join("&");


   ajax(
       url: "./TestXHR.aspx",              //请求地址
       type: "POST",                       //请求方式
       data:  name: "super", age: 20 ,        //请求参数
       dataType: "json",
       success: function (response, xml) 
           // 此处放成功后执行的代码
       ,
       fail: function (status) 
           // 此处放失败后执行的代码
       
);

总结

1.从 fetch()返回的 Promise 将不会拒绝HTTP错误状态, 即使响应是一个 HTTP 404 或 500。相反，它会正常解决 (其中ok状态设置为false), 并且仅在网络故障时或任何阻止请求完成时，它才会拒绝
2.默认情况下， 如果站点依赖维护用户会话（发送cookie，必须设置credentials init选项）， fetch 则不会发送或接收来自服务器的任何cookie，导致未经身份 验证的请求。
3.在语法上fetch 比ajax简洁了许多。
4.兼容上目前fetch 兼容不是太好 使用时需要引入 polyfill ：GitHub - github/fetch: A window.fetch JavaScript polyfill.

在默认情况下 fetch不会接受或者发送cookies，如果需要只能手动设置 credentials: ‘include’

1
2
3
4
5
6
fetct('/api',
    credentials: 'include'
)
.then(function(res)
    return // ...
)

参考链接：
https://github.com/github/fetch
https://segmentfault.com/a/1190000003810652
https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

原文:大专栏  fetch与ajax的区别


以上是关于fetch与ajax的区别的主要内容，如果未能解决你的问题，请参考以下文章

$.ajax,axios,fetch三种ajax请求的区别

fetch api和ajax本质的区别

axios/fetch和ajax的区别

Jquery ajax, Axios, Fetch区别

fetch、ajax 和 xhr 之间的区别

fetch 和 jquery ajax 有啥区别？