前言

Fetch API 提供了一个获取资源的接口（包括跨域）。任何使用过 XMLHttpRequest 的人都能轻松上手，但新的API提供了更强大和灵活的功能集。

这是官方API中的第一句话，可以看出fetch是Web API中新增的，用于取代XMLHttpRequest的网络请求框架，它比之更强大。下面我们来下它的使用。

Fetch

参数说明

fetch参数：一个必选的资源路径和一个可选的参数init。无论请求是否成功都返回一个Promise与$.ajax()的不同

fetch与$.ajax()的不同：

　　1、当接收到类似404或500这类表示错误时，fetch返回的Promise对象的状态仍然为resolve(resolve的返回值‘ok’属性设置为false)，仅当网络故障时或请求被阻止时，才会标记为 reject。
　　2、在默认情况的下fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求(`要发送 cookies，必须设置 credentials 选项`)。

示例

不带参数的请求

fetch('http://www.tingchunyu.com/test/fetch_test/fetch_test.php').then(response=>{
// response为HTTP响应
return response.json()// 将HTTP响应转为json数据
}).then(data=>{
console.log(data)// 打印json数据
}).catch(error=>{// 捕获异常
console.log(error)
})

 

 

 以上的代码获取到的是一个json字符串，其中response为了HTTP响应。如果要得到json数据需要使用.json()方法进行

 

 

 

 

fetch("http://localhost:4000/position/40.10038,116.36867")
body: JSON.stringify({id:666}),//这里是要传递的参数
headers: {
'content-type': 'application/json'
},
method: 'POST',
})
    .then(response=>response.json())
    .then(result=>{
        console.log(result);
  })

　　

　　

 

 

 

判断请求是否成功

　　resolved状态不一定代表请求成功，所以需要在resolved的状态下再次判断Response.ok，如下代码：

fetch('https://jk21.oss-cn-beijing.aliyuncs.com/temperature.json')
    .then(response => {
        if (response.ok) {
            return response.json()
        }
        throw new Error('请求失败')
    })
    .then(data => {
        console.log(data)
    })
    .catch(error => {
        console.log(error)
    })

　　

此外，Fetch 跨域请求时默认不会带 cookie，需要时得手动指定 credentials: 'include'

fetch('doAct.action', {credentials: 'include'}).then(function(res) {
    // ...
})

这和 XHR 的 withCredentials 一样，只是 withCredentials 只要设为 true就可以。