Fetch的使用

前言

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

1.传统XMLHttpRequest

代码语言：javascript复制

var xhr = new 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请求

代码语言：javascript复制

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方法打印数据。

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

代码语言：javascript复制

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

fetchPost请求

代码语言：javascript复制

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如果需要需手动设置

代码语言：javascript复制

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

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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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不能返回数据

cors不支持application/json

代码语言：javascript复制

let data = {name:'tvf',sex:'dsf'}; 
    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) 
 }) 

修改header后

代码语言：javascript复制

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

json xml javascript ecmascript http

0 人点赞