fetch与ajax（XMLHttpRequest）相比_fetch比ajax

前言

ES6中新增了一种HTTP数据请求的方式，就是fetch，它和XMLHttpRequest有许多相似的功能，但是相比XMLHttpRequest,fetch被设计成更具可扩展性和高效性。江湖上一直流传着 “传统ajax已死，fetch永生”的说法，下面详细说下二者

详情

1.XMLHttpRequest 请求数据

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();
1
2
3
4
5
6
7
8
9
10
11
12
13

2. fetch请求数据

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(e => console.log("Oops, error", e))
1
2
3
4

两段代码相比之下，fetch更为简洁，而且fetch请求属于promise结构，直接.then()方法处理回调数据，当出错时，会执行catch方法,而且promise避免了回调金字塔的问题。

3.fetch浏览器支持情况

目前谷歌浏览器对fetch的支持良好，具体支持情况如下图

当然，你也可以去这里查看can i use

4.fetch请求的四种方式

get请求

fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(e => console.log("Oops, error", e))
1
2
3
4

如果需要传递参数，需要拼接在url。
后面这里的调用的第一个then函数里面，返回结果是一个可读流形式

如果请求的是json数据，需要调用response.json()(这里的response是传递的参数)将可读流解析为json数据，在下一个then方法中，就可以得到想要的json数据了

同理，如果请求的txt文本数据，则需要调用response.text()来解析…更多调用的解析方法如下

response.arrayBuffer()
读取 Response对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为ArrayBuffer格式的promise对象

response.blob()
读取 Response对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为Blob格式的promise对象

response.formData()
读取Response对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为FormData格式的promise对象

response.json()
读取 Response对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为JSON格式的promise对象

response.text()
读取 Response对象并且将它设置为已读（因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次） ,并返回一个被解析为USVString格式的promise对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14

对于catch方法，只有报程序出错的时候才会执行。

post请求

 fetch(url,{
            method:'POST',
            headers:{
                'Content-type':'application/json'// 设置请求头数据类型
            },
            body:data
        })
        .then(res=>res.json())
        .then(data=>console.log(data))
1
2
3
4
5
6
7
8
9

method：设置设置请求的方式，默认是get，另外还有PUT、DELETE
headers：设置请求头信息，当然，这里面还可以设置别的信息，比如：

var u = new URLSearchParams();
u.append('method', 'flickr.interestingness.getList');
u.append('api_key', '<insert api key here>');
u.append('format', 'json');
u.append('nojsoncallback', '1');

fetch(url,{
            method:'POST',
            headers:u,
            body:data
        })
        .then(res=>res.json())
        .then(data=>console.log(data))
1
2
3
4
5
6
7
8
9
10
11
12
13

另外，fetch可以在header中设置CORS跨域

    u.append("Access-Control-Allow-Origin", "*");  
    u.append("Access-Control-Allow-Headers", "X-Requested-With");  
    u.append("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
    u.append("X-Powered-By",' 3.2.1')  
1
2
3
4

如果服务器不支持CORS，fetch提供了三种模式，其中no-cors可以继续访问服务器

fetch的mode配置项有3个值，如下：

• same-origin：该模式是不允许跨域的，它需要遵守同源策略，否则浏览器会返回一个error告知不能跨域；其对应的response type为basic。

• cors: 该模式支持跨域请求，顾名思义它是以CORS的形式跨域；当然该模式也可以同域请求不需要后端额外的CORS支持；其对应的response type为cors。

• no-cors: 该模式用于跨域请求但是服务器不带CORS响应头，也就是服务端不支持CORS；这也是fetch的特殊跨域请求方式；其对应的response type为opaque。

针对跨域请求，cors模式是常见跨域请求实现，但是fetch自带的no-cors跨域请求模式则较为陌生，该模式有一个比较明显的特点：

该模式允许浏览器发送本次跨域请求，但是不能访问响应返回的内容，这也是其response type为opaque透明的原因，如下图：

呃，感觉这样虽然解决能跨域问题，但是请求不到任何数据，还是没有卵用…

注意： cors 支持 三种content-type 不支持 application/json

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

body：需要传递的参数

fetch请求默认是不会携带cookie信息，如果想要携带，需要在手动设置

fetch(url, {
              method: 'POST',
              headers:{
                'Content-type':'application/json'// 设置请求头数据类型
                },
              credentials: "include" 
            })
1
2
3
4
5
6
7

credentials: "include"设置请求头携带cookie信息

put请求

 fetch(url,{
            method:'PUT',
            headers:{
                'Content-type':'application/json'// 设置请求头数据类型
            },
            body:data
        })
        .then(res=>res.json())
        .then(data=>console.log(data))
1
2
3
4
5
6
7
8
9

delete请求

 fetch(url,{
            method:'DELETE',
            headers:{
                'Content-type':'application/json'// 设置请求头数据类型
            },
            body:data
        })
        .then(res=>res.json())
        .then(data=>console.log(data))
1
2
3
4
5
6
7
8
9

其实，post,put,delete,这三个请求代码上差不多，只是method中对应不同的请求方法不同而已。

如下是自己封装的fetch的API代码

HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script src="easyhttp.js"></script>
  <script src="app.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

app.js

const url = 'http://jsonplaceholder.typicode.com/users';

let easyHttp = new EasyHttp;

// 请求数据
easyHttp.get(url)
        .then(res=>console.log(res))
        .catch(err=>console.log(err))


// 发送数据
const data = {
    name:"Henry",
    username:"露丝",
    email:"lusi@qq.com"
  };
// easyHttp.post(url,data)
//         .then(res=>console.log(res))
//         .catch(err=>console.log(err))


// 修改数据
// easyHttp.put(url+'/10',data)
//         .then(res=>console.log(res))
//         .catch(err=>console.log(err))

easyHttp.delete(url+'/2',data)
        .then(res=>console.log(res))
        .catch(err=>console.log(err))  
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

easyhttp.js

/**
 * fetch 增删改查 的API封装
 */

 class EasyHttp{
    //  get 请求
    get(url){
        return new Promise((resolve,reject)=>{
            fetch(url)
                .then(res=>res.json())
                .then(data=>resolve(data))
                .catch(err=>reject(err))
        })
    }

    // post 请求

    post(url,data){
        return new Promise((resolve,reject)=>{
            fetch(url,{
                method:'POST',
                headers:{
                    'Content-type':'application/json'// 设置请求头数据类型
                },
                body:data
            })
            .then(res=>res.json())
            .then(data=>resolve(data))
            .then(err=>reject(err))
        })
    }


    // put 请求修改数据
    put(url,data){
        return new Promise((resolve,reject)=>{
            fetch(url,{
                method:'PUT',
                headers:{
                    'Content-type':'application/json'// 设置请求头数据类型
                },
                body:data
            })
            .then(res=>res.json())
            .then(data=>resolve(data))
            .then(err=>reject(err))
        })
    }

      // delete 删除数据
      delete(url,data){
        return new Promise((resolve,reject)=>{
            fetch(url,{
                method:'DELETE',
                headers:{
                    'Content-type':'application/json'// 设置请求头数据类型
                },
                body:data
            })
            .then(res=>res.json())
            .then(data=>'删除数据成功。。。')
            .then(err=>reject(err))
        })
    }

 }
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
56
57
58
59
60
61
62
63
64
65
66

源码地址：戳一下

最后总结

fetch和XMLHttpRequest相比，主要有以下优点:

• 语法简洁，更加语义化
• 基于标准 Promise 实现，支持 async/await
• 同构方便，使用 isomorphic-fetch

参考文章

MDN Fetch API

ECMAScript 6 入门

Fetch相比Ajax有什么优势？

【fetch跨域请求】cors