一、Fetch介绍

  • 在jQuery开发时代，jQuery已经为我们封装了非常优雅的ajax函数，并且针对各个浏览器都做好了兼容，非常方便。但是当我们使用React Vue或者angular去开发webpap的时候，我们还会再为了一个ajax去使用jQuery吗？这是一个问题。
  • 另外一个问题，JavaScript中的ajax很早之前就有一个诟病，就是复杂业务下的callback嵌套问题。Promise正式js中解决这一问题的钥匙，并且作为标准在ES6中发布，接下来要介绍的fetch就用到了最新的Promise。
  • Fetch就是一种可替代ajax获取/提交数据的技术，有些高级浏览器已经可以使用window.fecth使用了。相比于使用jQuery.ajax更轻量，而且它支持Promise，更加符合现在的编程习惯。


二、Fetch基本使用

  1. npm install whatwg-fetch --save
  3. //  fetch在各个浏览器低版本的情况下是不被支持的，由于fetch是基于promise实现的，所以在低版本浏览器
  4. 中promise未必被原生支持
  5. npm install es6-promise --save  
  7. // 开启react项目中的服务器代码进行测试

2-1 GET请求

  1. #1. main.js 
  2. import 'whatwg-fetch'
  3. import 'es6-promise'
  5. fetch('/api/homead',{
  6.         credentials:"include",
  7.         /*
  8.             fetch不管在同域还是在跨域的情况下，默认都不携带cookie的，所以那些需要权限验证的请求就无法正常获取到数据，这时候需要配置credentials项，有一下三个选项可添：
  9.           omit： 默认值，忽略cookie的发送
  10.             same-origin： 表示cookie只能同域发送，不能跨域发送
  11.             include： 表示既可以同域发送，也可以跨域发送
  12.         */
  13.     })
  14.     .then(response => {
  15.         //有三种方式解析获取到的数据：
  16.         //1  json数据       用reponse.json()来解析
  17.         //2 xml格式文件  用response.text()来解析
  18.         //3 图片文件       用response.blob()来解析
  19.         return  response.json();
  20.     })
  21.     .then((data)=>{
  22.         console.log(data);
  23.     })
  25. #2.webpack.config.js 中配置代理开启跨域请求
  26.     devServer: {
  27.         proxy: {
  28.             '/api/*': {
  29.                 target: 'http://127.0.0.1:3001/',
  30.                 changeOrigin: true,
  31.                 secure: false
  32.             }
  33.         }
  34.     },
  35.     //表示凡是以api开头的请求都会自动去请求http://127.0.0.1:3001/ 地址下的服务

2-2 POST请求

  1. //post请求需要提交的数据
  2.   fetch('/api/submitComment', {
  3.       method: 'post',   //请求方式
  4.       credentials:"include",
  5.       headers: {
  6.           //post请求格式
  7.           'Content-Type': 'application/x-www-form-urlencoded'
  8.       },
  9.       //post请求发送的数据需要是这样的
  10.       body: "name=zhangsan&content=宝宝不开心"
  11.   })
  12.   .then(response => response.json())
  13.   .then(data=>{
  14.       console.log(data);
  15.   }).catch(error => console.log('error is', error));

2-3 fetch请求的封装

  1. import 'whatwg-fetch'
  2. import 'es6-promise'
  4. //导出get请求
  5. export function fetchget(url) {
  6.     var result = fetch(url, {
  7.         credentials: 'include',
  8.         headers: {
  9.             'Accept': 'application/json, text/plain, */*'
  10.         }
  11.     });
  12.     return result;
  13. }
  16. // 发送 post 请求
  17. export function fetchpost(url, paramsObj) {
  18.     var result = fetch(url, {
  19.         method: 'POST',
  20.         credentials: 'include',
  21.         headers: {
  22.             'Accept': 'application/json, text/plain, */*',
  23.             'Content-Type': 'application/x-www-form-urlencoded'
  24.         },
  25.         body: obj2params(paramsObj)
  26.     });
  27.     return result;
  28. }
  30. // 将对象拼接成 key1=val1&key2=val2&key3=val3 的字符串形式
  31. function obj2params(obj) {
  32.     var result = '';
  33.     var item;
  34.     for (item in obj) {
  35.         result += '&' + item + '=' + encodeURIComponent(obj[item]);
  36.     }
  38.     if (result) {
  39.         result = result.slice(1);
  40.     }
  42.     return result;
  43. }