es6之Fetch

前言

在es6之前我们使用XMLHttpRequest实现异步请求，而在es6又新增了一种HTTP请求方式---fetch与XMLHttpRequest一样同样能实现异步请求，相比较fetch更胜一筹，下面我们来看一下他们的区别。

1.传统XMLHttpRequest

    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                console.log('请求成功')
                console.log(xhr.responseText);
                //{"name":"test","sex":"nan"}
            }else{
                console.log('请求失败')
            }
        }
    }
    xhr.open('get','test.json');
    xhr.send();

2.fetch请求

fetch('test.json')
    .then(function(response){
        return response.json();
    })
    .then(function(data){
        console.log(data)
//{name: "test", sex: "nan"}
    })

可以看到使用fetch简单几行代码就实现一个请求并且fetch会自动解析数据，也就是请求的是json则转换为js对象，请求的是文本还是返回文本，则取决与你调用对应的函数如本文使用了response.json()返回json数据
response.json()返回json
response.text()返回文件
response.blob()返回二进制数据，如图片，视频等等

在上述代码中，第一个then返回的结果是一个可读流形式，所有资源都存储在body中，我们想要读取数据直接在第一个then方法返回对应的数据格式函数然后在第二个then方法打印数据。

image.png

get请求传参
get方式可直接在url后面传参

fetch('test.js?id=12')
    .then(function(response){
        console.log(response)
        return response.json();

    })
    .then(function(data){
        console.log(data)
    })

fetchPost请求

let data = {name:'tvf',sex:'dsf'};
    fetch('test.js',{
        method:'POST',
        headers:{
            'Content-type':'application/json'//设置请求头
        },
        body:JSON.stringify(data)
    })
    .then(res=>res.json())
    .catch(error=>{
//发生错误时执行
        console.log(error)
    })
    .then(data=>{
        console.log(data)
    })

fetch请求不会带上cookie如果需要需手动设置

fetch('test.js', {
  credentials: 'include'  //
})

fetch跨域
fetch请求跨域需设置mode
mode有三个取值

• same-origin 不允许跨域
• cors 允许跨域,需服务器配合如 node.js

res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

• no-cors 允许跨域，服务器不需要设置如上代码但不能将服务端数据返回
  需要注意得是cors不支持application/json

let data = {name:'tvf',sex:'dsf'};
    fetch('http://localhost:8080/test.js',{
        method:'POST',
        headers:{
            'Content-type':'application/json'//设置请求头
        },
        body:JSON.stringify(data),
        mode:'no-cors',//跨域
    })
    .then(function(response){
        return response.text();
        // console.log(response)
    })
    .catch(error=>{
        console.log(error)
    })
    .then(data=>{
        console.log(data)
    })

no-cors不能返回数据

image.png

cors不支持application/json

    fetch('http://localhost:8080/test.js',{
        method:'POST',
        headers:{
            'Content-type':'applicaton/json'//设置请求头
        },
        body:JSON.stringify(data),
        mode:'cors',//跨域
    })
    .then(function(response){
        return response.text();
        // console.log(response)
    })
    .catch(error=>{
        console.log(error)
    })
    .then(data=>{
        console.log(data)
    })

image.png

修改header后

    headers:{
            'Content-type':'text/plain'//设置请求头
        },

image.png