## 一、简介 > fetch，XMLHttpRequest的一种替代方案。相比之下，fetch更优。与XMLHttpRequest(XHR)类似，fetch()方法允许你发出AJAX请求。区别在于Fetch API使用Promise，因此是一种简洁明了的API，比XMLHttpRequest更加简单易用。（目前Chrome浏览器已经完美支持。） ### 1.1 `fetch`的基本使用 > `fetch`是全局量window的一个方法, 第一个参数是URL: ``` // url(必须），options（可选） fetch(url,{ method:'get' }) .then(response=>response.json()) .then(json=>{ // 处理数据结果 console.log(json) }) .catch(err=>{ console.log(err) }) ``` - 注意：`response`回调结果对象本身有一个`json()`方法，用于将原始数据转换成 JavaScript 对象，如果需要请求JSON数据就可以调用它。 ### 1.2 `fetch`请求 request #### 1、请求头 request header - 自定义请求头(通过`new Headers()`来创建请求头)： 1. `new Headers()` :创建请求头对象 2. `headers.append(key,value)` :添加请求头 3. `headers.has(key)` :判断是否有请求头 4. `headers.get(key)` :获取请求头 5. `headers.set(key,value)`：修改请求头 6. `headers.delete(key)`：删除请求头 ``` // 创建一个空的headers对象 var headers = new Headers(); // 添加（append）自定义请求头信息 headers.append('Content-Type','text/plain'); headers.append('X-My-Custom-Header', 'CustomValue'); // 判断（has），获取（get），以及修改（set）请求头 headers.has('Content-Type'); // true headers.get('Content-Type'); // "text/plain" headers.set('Content-Type', 'application/json'); // 删除某条请求头信息（delete） headers.delete('X-My-Custom-Header'); // 创建对象时设置初始化信息 var headers = new Headers({ 'Content-Type': 'text/plain', 'X-My-Custom-Header': 'CustomValue' }); // 将headers对象添加到request方法中 var request = new Request(url,{ headers:new Headers({'Content-Type':'text/plain'}) }) fetch(request).then(res=>{/*处理响应逻辑*/}) ``` #### 2、Request简介 > Request 对象表示一次 fetch 调用的请求信息。传入 Request 参数来调用 fetch, 可以执行很多自定义请求的高级用法: * `method` - 支持 GET, POST, PUT, DELETE, HEAD * `url` - 请求的 URL * `headers `- 对应的 Headers 对象 * `referrer` - 请求的 referrer 信息 * `mode `- 可以设置 cors, no-cors, same-origin * `credentials `- 设置 cookies 是否随请求一起发送。可以设置: omit, same-origin * `redirect` - follow, error, manual * `integrity` - subresource 完整性值(integrity value) * `cache` - 设置 cache 模式 (default, reload, no-cache) - 示例： ``` var request = new Request(url,{ method:'post', mode:'cors', redirect:'follow', headers:new Headers({ 'Content-Type':'text/plain' }), body:JSON.stringify({ //请求参数体 username:admin, password:123456 }) }) // 发送请求 fetch(request) .then(res=>{/*处理结果*/}) ``` ##### 2.1