fetch的用法

转载

mb5fe559b5073e8 2021-02-04 15:46:00

文章标签 json android github chrome xml 文章分类 代码人生

fetch是web提供的一个可以获取异步资源的api，目前还没有被所有浏览器支持，它提供的api返回的是Promise对象，所以你在了解这个api前首先得了解Promise的用法。

（由于很多公司内网，对部分网站进行了过滤、封锁，导致文章或文章图片无法查看）

那我们首先讲讲在没有fetch的时候，我们是如何获取异步资源的：

//发送一个get请求是这样的:

//首先实例化一个XMLHttpRequest对象
var httpRequest = new XMLHttpRequest();

//注册httpRequest.readyState改变时会回调的函数,httpRequest.
//readyState共有5个可能的值,
//0   UNSENT (未打开)   open()方法还未被调用;
//1   OPENED  (未发送)  send()方法还未被调用;
//2   HEADERS_RECEIVED (已获取响应头)  send()方法已经被调用, 响应头和响应状态已经返回;
//3   LOADING (正在下载响应体) 响应体下载中; responseText中已经获取了部分数据;
//4   DONE (请求完成) 整个请求过程已经完毕.
httpRequest.onreadystatechange = function(){
 //该回调函数会被依次调用4次
 console.log(httpRequest.readyState);

 if(httpRequest.readyState===4){
   //请求已完成
   if(httpRequest.status===200){
     //http状态为200
     console.log(httpRequest.response);

     var data = JSON.parse(httpRequest.response);
     console.log(data);
   }
 }

}

//请求的网址
var url = "http://127.0.0.1:7777/list";
//该方法为初始化请求,第一个参数是请求的方法,比如GET,POST,PUT,第二个参数是请求的url
httpRequest.open('GET',url,true);

//设置http请求头
httpRequest.setRequestHeader("Content-Type","application/json");

//发出请求,参数为要发送的body体,如果是GET方法的话，一般无需发送body,设为空就可以
httpRequest.send(null);

如果用了fetch之后，发送一个get请求是这样的：

//请求的网址
var url = "http://127.0.0.1:7777/list";
//发起get请求
var promise = fetch(url).then(function(response) {

   //response.status表示响应的http状态码
   if(response.status === 200){
     //json是返回的response提供的一个方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise了
     return response.json();
   }else{
     return {}
   }

});

promise = promise.then(function(data){
  //响应的内容
  console.log(data);
}).catch(function(err){
  console.log(err);
})

接下来介绍下fetch的语法:

/**
参数:
input:定义要获取的资源。可能的值是：一个URL或者一个Request对象。
init:可选,是一个对象，参数有：
  method: 请求使用的方法，如 GET、POST。
  headers: 请求的头信息，形式为 Headers 对象或 ByteString。
  body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
  mode: 请求的模式，如 cors、 no-cors 或者 same-origin,默认为no-cors,该模式允许来自 CDN 的脚本、其他域的图片和其他一些跨域资源，但是首先有个前提条件，就是请求的 method 只能是HEAD、GET 或 POST。此外，如果 ServiceWorkers 拦截了这些请求，它不能随意添加或者修改除这些之外 Header 属性。第三，JS 不能访问 Response 对象中的任何属性，这确保了跨域时 ServiceWorkers 的安全和隐私信息泄漏问题。cors模式允许跨域请求,same-origin模式对于跨域的请求，将返回一个 error，这样确保所有的请求遵守同源策略。
  credentials: 请求的 credentials，如 omit、same-origin 或者 include。
  cache:  请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.
返回值：一个 Promise，resolve 时回传 Response 对象。
*/
fetch(input, init).then(function(response) {  });

一个发送post请求的示例:

fetch("http://127.0.0.1:7777/postContent", {
  method: "POST",
  headers: {
      "Content-Type": "application/json",
  },
  mode: "cors",
  body: JSON.stringify({
      content: "留言内容"
  })
}).then(function(res) {
  if (res.status === 200) {
      return res.json()
  } else {
      return Promise.reject(res.json())
  }
}).then(function(data) {
  console.log(data);
}).catch(function(err) {
  console.log(err);
});

如果考虑低版本浏览器的问题的话，引入https://github.com/github/fetch/blob/master/fetch.js 即可兼容。

使用 Fetch

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest 实现的。Fetch 提供了一个更理想的替代方案，可以很容易地被其他技术使用，例如 Service Workers。Fetch 还提供了专门的逻辑空间来定义其他与 HTTP 相关的概念，例如 CORS 和 HTTP 的扩展。

请注意，fetch 规范与 jQuery.ajax() 主要有三种方式的不同：

当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
fetch() 可以不会接受跨域 cookies；你也可以不能使用 fetch() 建立起跨域会话。~~其他网站的~~ Set-Cookie ~~头部字段将会被无视。~~
fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。（自 2017 年 8 月 25 日以后，默认的 credentials 政策变更为 same-origin。Firefox 也在 61.0b13 版本中进行了修改）

一个基本的 fetch 请求设置起来很简单。看看下面的代码：

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

这里我们通过网络获取一个 JSON 文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径，然后返回一个包含响应结果的promise（一个 Response 对象）。

当然它只是一个 HTTP 响应，而不是真的JSON。为了获取JSON的内容，我们需要使用 json() 方法（在 Body mixin 中定义，被 Request 和 Response 对象实现）。

注意：Body mixin 还有其他相似的方法，用于获取其他类型的内容。

最好使用符合内容安全策略 (CSP)的链接而不是使用直接指向资源地址的方式来进行Fetch的请求。

fetch() 接受第二个可选参数，一个可以控制不同配置的 init 对象：

// Example POST method implementation:

postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

function postData(url, data) {
  // Default options are marked with *
  return fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })
  .then(response => response.json()) // parses response to JSON
}

为了让浏览器发送包含凭据的请求（即使是跨域源），要将credentials: 'include'添加到传递给 fetch()方法的init对象。

fetch('https://example.com', {
  credentials: 'include'
})

如果你只想在请求URL与调用脚本位于同一起源处时发送凭据，请添加 credentials: 'same-origin'。

// The calling script is on the origin 'https://example.com'

fetch('https://example.com', {
  credentials: 'same-origin'
})

要改为确保浏览器不在请求中包含凭据，请使用 credentials: 'omit'。

fetch('https://example.com', {
  credentials: 'omit'
})

使用 fetch() POST JSON数据

var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

可以通过 HTML <input type="file" /> 元素，FormData() 和 fetch() 上传文件。

var formData = new FormData();
var fileField = document.querySelector("input[type='file']");

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

可以通过HTML <input type="file" mutiple/> 元素，FormData() 和 fetch() 上传文件。

var formData = new FormData();
var photos = document.querySelector("input[type='file'][multiple]");

formData.append('title', 'My Vegas Vacation');
// formData 只接受文件、Blob 或字符串，不能直接传递数组，所以必须循环嵌入
for (let i = 0; i < photos.files.length; i++) {
    formData.append('photo', photos.files[i]);
}

fetch('https://example.com/posts', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));

如果遇到网络故障，fetch() promise 将会 reject，带上一个 TypeError 对象。虽然这个情况经常是遇到了权限问题或类似问题——比如 404 不是一个网络故障。想要精确的判断 fetch() 是否成功，需要包含 promise resolved 的情况，此时再判断 Response.ok 是不是为 true。类似以下代码：

fetch('flowers.jpg').then(function(response) {
  if(response.ok) {
    return response.blob();
  }
  throw new Error('Network response was not ok.');
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
}).catch(function(error) {
  console.log('There has been a problem with your fetch operation: ', error.message);
});

除了传给 fetch() 一个资源的地址，你还可以通过使用 Request() 构造函数来创建一个 request 对象，然后再作为参数传给 fetch()：

var myHeaders = new Headers();

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg', myInit);

fetch(myRequest).then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

Request() 和 fetch() 接受同样的参数。你甚至可以传入一个已存在的 request 对象来创造一个拷贝：

var anotherRequest = new Request(myRequest,myInit);

这个很有用，因为 request 和 response bodies 只能被使用一次（译者注：这里的意思是因为设计成了 stream 的方式，所以它们只能被读取一次）。创建一个拷贝就可以再次使用 request/response 了，当然也可以使用不同的 init 参数。

注意：clone() 方法也可以用于创建一个拷贝。它和上述方法一样，如果 request 或 response 的 body 已经被读取过，那么将执行失败。区别在于， clone() 出的 body 被读取不会导致原 body 被标记为已读取。

Headers

使用 Headers 的接口，你可以通过 Headers() 构造函数来创建一个你自己的 headers 对象。一个 headers 对象是一个简单的多名值对：

var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

也可以传一个多维数组或者对象字面量：

myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});

它的内容可以被获取：

console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false
myHeaders.set("Content-Type", "text/html");
myHeaders.append("X-Custom-Header", "AnotherValue");

console.log(myHeaders.get("Content-Length")); // 11
console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]

myHeaders.delete("X-Custom-Header");
console.log(myHeaders.getAll("X-Custom-Header")); // [ ]

虽然一些操作只能在 ServiceWorkers 中使用，但是它提供了更方便的操作 Headers 的 API。

如果使用了一个不合法的HTTP Header属性名，那么Headers的方法通常都抛出 TypeError 异常。如果不小心写入了一个不可写的属性，也会抛出一个 TypeError 异常。除此以外的情况，失败了并不抛出异常。例如：

var myResponse = Response.error();
try {
  myResponse.headers.set("Origin", "http://mybank.com");
} catch(e) {
  console.log("Cannot pretend to be a bank!");
}

最好在在使用之前检查内容类型 content-type 是否正确，比如：

fetch(myRequest).then(function(response) {
  if(response.headers.get("content-type") === "application/json") {
    return response.json().then(function(json) {
      // process your JSON further
    });
  } else {
    console.log("Oops, we haven't got JSON!");
  }
});

Guard

由于 Headers 可以在 request 请求中被发送或者在 response 请求中被接收，并且规定了哪些参数是可写的，Headers 对象有一个特殊的 guard 属性。这个属性没有暴露给 Web，但是它影响到哪些内容可以在 Headers 对象中被操作。

可能的值如下：

none：默认的
request：从 request 中获得的 headers（Request.headers）只读
request-no-cors：从不同域（Request.mode no-cors）的 request 中获得的 headers 只读
response：从 response 中获得的 headers（Response.headers）只读
immutable：在 ServiceWorkers 中最常用的，所有的 headers 都只读。

注意：你不可以添加或者修改一个 guard 属性是 request 的 Request Header 的 Content-Length 属性。同样地，插入 Set-Cookie 属性到一个 response header 是不允许的，因此，Service Worker 中，不能给合成的 Response 的 header 添加一些 cookie。

Response 对象

如上所述，Response 实例是在 fetch() 处理完 promise 之后返回的。

你会用到的最常见的 response 属性有:

Response.status — 整数（默认值为200）为response的状态码。
Response.statusText — 字符串（默认值为"OK"），该值与 HTTP 状态码消息对应。
Response.ok — 如上所示，该属性是来检查response的状态是否在 200 - 299（包括200 和 299）这个范围内。该属性返回一个布尔值。

它的实例也可用通过 JavaScript 来创建，但只有在 ServiceWorkers 中才真正有用，当使用 respondWith() 方法并提供了一个自定义的 response 来接受 request 时：

var myBody = new Blob();

addEventListener('fetch', function(event) {
  event.respondWith(new Response(myBody, {
    headers: { "Content-Type" : "text/plain" }
  });
});

Response() 构造方法接受两个可选参数—— response 的数据体和一个初始化对象（与Request() 所接受的 init 参数类似。）

注意: 静态方法 error() 只是返回了错误的response。与此类似地，redirect() 只是返回了一个可以重定向至某 URL 的 response。这些也只与 Service Worker 有关。

Body

不管是请求还是响应都能够包含 body 对象。body 也可以是以下任意类型的实例。

Body 类定义了以下方法（这些方法都被 Request 和Response所实现）以获取 body 内容。这些方法都会返回一个被解析后的Promise对象和数据。

比起XHR来，这些方法让非文本化的数据使用起来更加简单。

请求体可以由传入 body 参数来进行设置：

var form = new FormData(document.getElementById('login-form'));
fetch("/login", {
  method: "POST",
  body: form
})

request和response（包括 fetch() 方法）都会试着自动设置 Content-Type。如果没有设置 Content-Type 值，发送的请求也会自动设值。

特性检测

Fetch API 的支持情况，可以通过检测Headers, Request, Response 或 fetch()是否在Window 或 Worker 域中。例如：

if(self.fetch) {
    // run my fetch request here
} else {
    // do something with XMLHttpRequest?
}

Polyfill

如果要在不支持的浏览器中使用 Fetch，可以使用 Fetch Polyfill。

规范

详细说明	状态	注释
Fetch	Living Standard	Initial definition

浏览器兼容性

Report problems with this compatibility data on GitHub

`fetch` Experimental	ChromeFull support42	EdgeFull support14	FirefoxFull support39 Open	Internet ExplorerNo supportNo	OperaFull support29 Open	SafariFull support10.1	WebView AndroidFull support42	Chrome AndroidFull support42	Firefox AndroidFull support39 Open	Opera AndroidFull support29 Open	iOS SafariFull support10.3	Samsung InternetFull support4.0
Support for blob: and data: Experimental	ChromeFull support48	EdgeFull support79	FirefoxCompatibility unknown; please update this.?	Internet ExplorerNo supportNo	OperaCompatibility unknown; please update this.?	SafariCompatibility unknown; please update this.?	WebView AndroidFull support43	Chrome AndroidFull support48	Firefox AndroidCompatibility unknown; please update this.?	Opera AndroidCompatibility unknown; please update this.?	iOS SafariCompatibility unknown; please update this.?	Samsung InternetFull support5.0
referrerPolicy	ChromeFull support52	EdgeFull support79	FirefoxFull support52	Internet ExplorerNo supportNo	OperaFull support39	SafariFull support11.1	WebView AndroidFull support52	Chrome AndroidFull support52	Firefox AndroidFull support52	Opera AndroidFull support41	iOS SafariNo supportNo	Samsung InternetFull support6.0
signal Experimental	ChromeFull support66	EdgeFull support16	FirefoxFull support57	Internet ExplorerNo supportNo	OperaFull support53	SafariFull support11.1	WebView AndroidFull support66	Chrome AndroidFull support66	Firefox AndroidFull support57	Opera AndroidFull support47	iOS SafariFull support11.3	Samsung InternetFull support9.0
Streaming response body Experimental	ChromeFull support43	EdgeFull support14	FirefoxFull supportYes disabled Open	Internet ExplorerNo supportNo	OperaFull support29	SafariFull support10.1	WebView AndroidFull support43	Chrome AndroidFull support43	Firefox AndroidNo supportNo	Opera AndroidNo supportNo	iOS SafariFull support10.3	Samsung InternetFull support4.0
	desktop	mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox Android	Opera Android	iOS Safari	Samsung Internet

Legend

Full supportFull support

No supportNo support

Compatibility unknownCompatibility unknown

Experimental. Expect behavior to change in the future.

See implementation notes.

User must explicitly enable this feature.

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Fetch使用方法

前言：

　　fetch是用来取代传统的XMLHttpRequest的。它的优点很多，包括链式调用的语法、返回promise等。

什么是fetch?

　　fetch api是基于promise的设计，它是为了取代传统xhr的不合理的写法而生的。

WHY fetch？

　　xhr请求写起来非常的混乱，如下所示：

fetch的用法_chrome

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();

fetch的用法_android_02

　　但是使用fetch之后，如下所示：

fetch的用法_android_03

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

fetch的用法_json_04

　　这种链式调用的风格看上去会非常舒服。

　　如果我们再使用了箭头函数就会更加简洁了。

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

　　通过使用fetch api，可以将传统的xhr的粗糙的使用方法转化的如此精简，实在是好！

　　但是呢？使用Promise，还是可以很明显看到callback的使用，不急，我们还可以使用 async、await ：

fetch的用法_xml_05

// Async/Await requirements: Latest Chrome/FF browser or Babel: https://babeljs.io/docs/plugins/transform-async-to-generator/
// Fetch requirements: Latest Chrome/FF browser or Github fetch polyfill: https://github.com/github/fetch

// async function
async function fetchAsync () {
  // await response of fetch call
  let response = await fetch('https://api.github.com');
  // only proceed once promise is resolved
  let data = await response.json();
  // only proceed once second promise is resolved
  return data;
}

// trigger async function
// log response or catch error of fetch promise
fetchAsync()
    .then(data => console.log(data))
    .catch(reason => console.log(reason.message))

fetch的用法_android_06

　　这样看上去是不是就好多了呢？

注意：对于async和await的使用还是很明确的，就是一般我们在一个异步函数之前添加 await 关键词，然后在这个 await 的相关代码外面使用的时 async 函数，这样的结合才是合适的。
利用 async 和 await，我们就可以像写同步代码一样来写异步代码啦！
但是呢，目前async 和 await 的支持性还不是很好，目前还无法在一般的浏览器中使用！

基本使用方法：

fetch必须接受一个资源路径作为参数，并且返回了一个promise，所以我们可以直接使用链式调用的方式。

fetch的用法_chrome_07

fetch("/getAllProduct").then(function(res) {
            return res.json();
        }).then(function (data) {
            if (data.code == 200) {
              console.log('获取到所有产品' ,data.data);
              that.props.addAllProduct(data.data);
            } else {
              console.log(data.message);
            }
        })

fetch的用法_chrome_08

这样，我们就可以发送一个ajax请求。

fetch的用法_json_09

/* 对客户端的返回数据封装
 * @param [code] (number) code为返回的状态码
 * @param [message] (string) message为返回的信息
 * @param [data] (any) data是可选的，为返回给前端的数据
 */
// 注意： retrunJson中的res为node处理接口的回调函数中的res，这个是必须的。
function returnJson(res, code, message, data) {
    var response = {
        code: code,
        message: message
    };
    if (typeof data !== 'undefined') {
        response.data = data;
    }
    res.json(response);

// 返回这个请求之后，必须要 res.end()表示请求的结束，否则后台可能会崩溃。
    res.end();
}

router.post('/register', function (req, res) {
    let userName = req.body.username,
        password = req.body.password,
        passwordAgain = req.body.passwordAgain,
        type = req.body.type;
    console.log(userName, password, type);
    if (type == 1) {
        if (password == passwordAgain) {
            let managerId = uuidv1();

            console.log(userName, password, passwordAgain);

            var newUser = new Manager({
                name: userName,
                password: password,
                type: req.body.type,
                managerId: managerId
            });

            Manager.find(userName, function (err, user) {
                if (err) {
                    returnJson(res, 5001, '服务器错误，注册失败');
                } else {
                    if (user !== null) {
                        returnJson(res, 4003, "此用户已经注册！");
                    } else {
                        // 如果符合条件，就注册该用户，将数据保存在数据库。
                        newUser.save(function (err, user) {
                            if (err) {
                                // 服务器端错误，失败返回状态码500
                                returnJson(res, 500, "用户注册失败！");
                            } else {
                                // user数据较简单，直接传递user即可，如果复杂，我们可以考虑使用对象形式传递更多数据。
                                returnJson(res, 200, "用户注册成功！", user);
                            }
                        });
                    }
                }
            });
        } else {
            returnJson(res, 4001, "用户两次输入密码不一致！");
        }
    } else if( type == 2) {

         if (password == passwordAgain) {
            let userId = uuidv1();

            console.log(userName, password, passwordAgain);

            var newUser = new User({
                name: userName,
                password: password,
                type: req.body.type,
                userId: userId
            });

            User.find(userName, function (err, user) {
                if (err) {
                    returnJson(res, 5001, '服务器错误，注册失败');
                } else {
                    if (user !== null) {
                        returnJson(res, 4003, "此用户已经注册！");
                    } else {
                        // 如果符合条件，就注册该用户，将数据保存在数据库。
                        newUser.save(function (err, user) {
                            if (err) {
                                // 服务器端错误，失败返回状态码500
                                returnJson(res, 500, "用户注册失败！");
                            } else {
                                // user数据较简单，直接传递user即可，如果复杂，我们可以考虑使用对象形式传递更多数据。
                                returnJson(res, 200, "用户注册成功！", user);
                            }
                        });
                    }
                }
            });
        } else {
            returnJson(res, 4001, "用户两次输入密码不一致！");
        }
    }
});

fetch的用法_json_10

这样，我们就可以处理一个ajax请求。

注意点：

1、fetch() 返回的是一个Promise对象。

　　fetch使用的promise对象可以使得我们使用同步的方式写异步函数。

2、 fetch api是可以结合 async 和 await 来使用的。

　　fetch是基于promise实现的，但是使用promise的写法，我们还是可以看到callback的影子，如果结合 async和await来使用，还是非常不错的。

3、 Fetch api 提供的spi囊括但是不限于xhr的所有功能。

4、 fetch api 可以跨域。

　　参考： https://fetch.spec.whatwg.org/#http-cors-protocol

　　跨域请求必须包括 Origin 作为header.

fetch的用法_json_11

　　　　以上。

　　　　我们在发送fetch请求的时候就会使用到CORS协议，尽管这些对于开发者来说是透明的，但是浏览器还是会发送 origin 字段。

那么，这里推荐自己用 fecth 吗？实际上，因为我不太信任它，原因有很多。因此我在用一个叫 axios 的库，也是基于 promise 的，同时非常可靠。

5、fetch提供了对request和response对象的通用定义。

　 Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。所以在一个Fetch请求中，完全可以只使用Request 和 Response两个对象，通过Request 设置参数，通过Response 对返回值进行处理。　

　所以，我们可以将一个fetch定义如下：

fetch的用法_json_12

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');
var option = { method: 'GET',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default' };
var myRequest = new Request('https://api.github.com/users/mzabriskie',option);
fetch(myRequest).then(function(response) {
    ... 
});

fetch的用法_github_13

（由于很多公司内网，对部分网站进行了过滤、封锁，导致文章或文章图片无法查看）

那我们首先讲讲在没有fetch的时候，我们是如何获取异步资源的：

//发送一个get请求是这样的:

//首先实例化一个XMLHttpRequest对象
var httpRequest = new XMLHttpRequest();

//注册httpRequest.readyState改变时会回调的函数,httpRequest.
//readyState共有5个可能的值,
//0   UNSENT (未打开)   open()方法还未被调用;
//1   OPENED  (未发送)  send()方法还未被调用;
//2   HEADERS_RECEIVED (已获取响应头)  send()方法已经被调用, 响应头和响应状态已经返回;
//3   LOADING (正在下载响应体) 响应体下载中; responseText中已经获取了部分数据;
//4   DONE (请求完成) 整个请求过程已经完毕.
httpRequest.onreadystatechange = function(){
 //该回调函数会被依次调用4次
 console.log(httpRequest.readyState);

 if(httpRequest.readyState===4){
   //请求已完成
   if(httpRequest.status===200){
     //http状态为200
     console.log(httpRequest.response);

     var data = JSON.parse(httpRequest.response);
     console.log(data);
   }
 }

}

//请求的网址
var url = "http://127.0.0.1:7777/list";
//该方法为初始化请求,第一个参数是请求的方法,比如GET,POST,PUT,第二个参数是请求的url
httpRequest.open('GET',url,true);

//设置http请求头
httpRequest.setRequestHeader("Content-Type","application/json");

//发出请求,参数为要发送的body体,如果是GET方法的话，一般无需发送body,设为空就可以
httpRequest.send(null);

如果用了fetch之后，发送一个get请求是这样的：

//请求的网址
var url = "http://127.0.0.1:7777/list";
//发起get请求
var promise = fetch(url).then(function(response) {

   //response.status表示响应的http状态码
   if(response.status === 200){
     //json是返回的response提供的一个方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise了
     return response.json();
   }else{
     return {}
   }

});

promise = promise.then(function(data){
  //响应的内容
  console.log(data);
}).catch(function(err){
  console.log(err);
})

接下来介绍下fetch的语法:

/**
参数:
input:定义要获取的资源。可能的值是：一个URL或者一个Request对象。
init:可选,是一个对象，参数有：
  method: 请求使用的方法，如 GET、POST。
  headers: 请求的头信息，形式为 Headers 对象或 ByteString。
  body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
  mode: 请求的模式，如 cors、 no-cors 或者 same-origin,默认为no-cors,该模式允许来自 CDN 的脚本、其他域的图片和其他一些跨域资源，但是首先有个前提条件，就是请求的 method 只能是HEAD、GET 或 POST。此外，如果 ServiceWorkers 拦截了这些请求，它不能随意添加或者修改除这些之外 Header 属性。第三，JS 不能访问 Response 对象中的任何属性，这确保了跨域时 ServiceWorkers 的安全和隐私信息泄漏问题。cors模式允许跨域请求,same-origin模式对于跨域的请求，将返回一个 error，这样确保所有的请求遵守同源策略。
  credentials: 请求的 credentials，如 omit、same-origin 或者 include。
  cache:  请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.
返回值：一个 Promise，resolve 时回传 Response 对象。
*/
fetch(input, init).then(function(response) {  });

一个发送post请求的示例:

fetch("http://127.0.0.1:7777/postContent", {
  method: "POST",
  headers: {
      "Content-Type": "application/json",
  },
  mode: "cors",
  body: JSON.stringify({
      content: "留言内容"
  })
}).then(function(res) {
  if (res.status === 200) {
      return res.json()
  } else {
      return Promise.reject(res.json())
  }
}).then(function(data) {
  console.log(data);
}).catch(function(err) {
  console.log(err);
});

如果考虑低版本浏览器的问题的话，引入https://github.com/github/fetch/blob/master/fetch.js 即可兼容。

前言：

　　fetch是用来取代传统的XMLHttpRequest的。它的优点很多，包括链式调用的语法、返回promise等。

什么是fetch?

　　fetch api是基于promise的设计，它是为了取代传统xhr的不合理的写法而生的。

WHY fetch？

　　xhr请求写起来非常的混乱，如下所示：

fetch的用法_xml_14

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();

fetch的用法_github_15

　　但是使用fetch之后，如下所示：

fetch的用法_github_16

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

fetch的用法_json_17

　　这种链式调用的风格看上去会非常舒服。

　　如果我们再使用了箭头函数就会更加简洁了。

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

　　通过使用fetch api，可以将传统的xhr的粗糙的使用方法转化的如此精简，实在是好！

　　但是呢？使用Promise，还是可以很明显看到callback的使用，不急，我们还可以使用 async、await ：

fetch的用法_github_18

// Async/Await requirements: Latest Chrome/FF browser or Babel: https://babeljs.io/docs/plugins/transform-async-to-generator/
// Fetch requirements: Latest Chrome/FF browser or Github fetch polyfill: https://github.com/github/fetch

// async function
async function fetchAsync () {
  // await response of fetch call
  let response = await fetch('https://api.github.com');
  // only proceed once promise is resolved
  let data = await response.json();
  // only proceed once second promise is resolved
  return data;
}

// trigger async function
// log response or catch error of fetch promise
fetchAsync()
    .then(data => console.log(data))
    .catch(reason => console.log(reason.message))

fetch的用法_chrome_19

　　这样看上去是不是就好多了呢？

注意：对于async和await的使用还是很明确的，就是一般我们在一个异步函数之前添加 await 关键词，然后在这个 await 的相关代码外面使用的时 async 函数，这样的结合才是合适的。
利用 async 和 await，我们就可以像写同步代码一样来写异步代码啦！
但是呢，目前async 和 await 的支持性还不是很好，目前还无法在一般的浏览器中使用！

基本使用方法：

fetch必须接受一个资源路径作为参数，并且返回了一个promise，所以我们可以直接使用链式调用的方式。

fetch的用法_github_20

fetch("/getAllProduct").then(function(res) {
            return res.json();
        }).then(function (data) {
            if (data.code == 200) {
              console.log('获取到所有产品' ,data.data);
              that.props.addAllProduct(data.data);
            } else {
              console.log(data.message);
            }
        })

fetch的用法_github_21

这样，我们就可以发送一个ajax请求。

fetch的用法_xml_22

/* 对客户端的返回数据封装
 * @param [code] (number) code为返回的状态码
 * @param [message] (string) message为返回的信息
 * @param [data] (any) data是可选的，为返回给前端的数据
 */
// 注意： retrunJson中的res为node处理接口的回调函数中的res，这个是必须的。
function returnJson(res, code, message, data) {
    var response = {
        code: code,
        message: message
    };
    if (typeof data !== 'undefined') {
        response.data = data;
    }
    res.json(response);

// 返回这个请求之后，必须要 res.end()表示请求的结束，否则后台可能会崩溃。
    res.end();
}

router.post('/register', function (req, res) {
    let userName = req.body.username,
        password = req.body.password,
        passwordAgain = req.body.passwordAgain,
        type = req.body.type;
    console.log(userName, password, type);
    if (type == 1) {
        if (password == passwordAgain) {
            let managerId = uuidv1();

            console.log(userName, password, passwordAgain);

            var newUser = new Manager({
                name: userName,
                password: password,
                type: req.body.type,
                managerId: managerId
            });

            Manager.find(userName, function (err, user) {
                if (err) {
                    returnJson(res, 5001, '服务器错误，注册失败');
                } else {
                    if (user !== null) {
                        returnJson(res, 4003, "此用户已经注册！");
                    } else {
                        // 如果符合条件，就注册该用户，将数据保存在数据库。
                        newUser.save(function (err, user) {
                            if (err) {
                                // 服务器端错误，失败返回状态码500
                                returnJson(res, 500, "用户注册失败！");
                            } else {
                                // user数据较简单，直接传递user即可，如果复杂，我们可以考虑使用对象形式传递更多数据。
                                returnJson(res, 200, "用户注册成功！", user);
                            }
                        });
                    }
                }
            });
        } else {
            returnJson(res, 4001, "用户两次输入密码不一致！");
        }
    } else if( type == 2) {

         if (password == passwordAgain) {
            let userId = uuidv1();

            console.log(userName, password, passwordAgain);

            var newUser = new User({
                name: userName,
                password: password,
                type: req.body.type,
                userId: userId
            });

            User.find(userName, function (err, user) {
                if (err) {
                    returnJson(res, 5001, '服务器错误，注册失败');
                } else {
                    if (user !== null) {
                        returnJson(res, 4003, "此用户已经注册！");
                    } else {
                        // 如果符合条件，就注册该用户，将数据保存在数据库。
                        newUser.save(function (err, user) {
                            if (err) {
                                // 服务器端错误，失败返回状态码500
                                returnJson(res, 500, "用户注册失败！");
                            } else {
                                // user数据较简单，直接传递user即可，如果复杂，我们可以考虑使用对象形式传递更多数据。
                                returnJson(res, 200, "用户注册成功！", user);
                            }
                        });
                    }
                }
            });
        } else {
            returnJson(res, 4001, "用户两次输入密码不一致！");
        }
    }
});

fetch的用法_chrome_23

这样，我们就可以处理一个ajax请求。

注意点：

1、fetch() 返回的是一个Promise对象。

　　fetch使用的promise对象可以使得我们使用同步的方式写异步函数。

2、 fetch api是可以结合 async 和 await 来使用的。

　　fetch是基于promise实现的，但是使用promise的写法，我们还是可以看到callback的影子，如果结合 async和await来使用，还是非常不错的。

3、 Fetch api 提供的spi囊括但是不限于xhr的所有功能。

4、 fetch api 可以跨域。

　　参考： https://fetch.spec.whatwg.org/#http-cors-protocol

　　跨域请求必须包括 Origin 作为header.

fetch的用法_json_11

　　　　以上。

　　　　我们在发送fetch请求的时候就会使用到CORS协议，尽管这些对于开发者来说是透明的，但是浏览器还是会发送 origin 字段。

那么，这里推荐自己用 fecth 吗？实际上，因为我不太信任它，原因有很多。因此我在用一个叫 axios 的库，也是基于 promise 的，同时非常可靠。

5、fetch提供了对request和response对象的通用定义。

　所以，我们可以将一个fetch定义如下：

fetch的用法_json_25

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');
var option = { method: 'GET',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default' };
var myRequest = new Request('https://api.github.com/users/mzabriskie',option);
fetch(myRequest).then(function(response) {
    ... 
});

fetch的用法_github_26

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：nginx让用户通过用户名密码认证访问web页面

下一篇：Android 调用WCF实例详解

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

fetch的用法

fetch的用法

​

​

​

​

​

​

Headers

Guard

Response 对象

Body

特性检测

Polyfill

规范

浏览器兼容性

Legend

前言：

什么是fetch?

WHY fetch？

基本使用方法：

注意点：

前言：

什么是fetch?

WHY fetch？

基本使用方法：

注意点：

51CTO博客