promise 与 fetch 详细介绍 与 使用

1. promise

1.1  含义

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大；

1.2  基本语法

new Promise(function(resolve, reject) {
  // ... some code 比如发送ajax
  
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
}).then(data => {})
.catch( err => {});

1.3 状态

三个方法调用，对应三个状态修改；pending--> notify(); fulfilled--> resolve() ; unfulfilled  ->reject()；三个方法返回的ren

1.4 方法介绍：

Promise:  构造方法，里面传递一个函数，这个函数体内一般异步操作，成功调用resolve 方法，反之调用reject 方

then： 指定resolved状态和rejected状态的回调函数。参数说明，第一个是状态为成功的回调函数，第二个是失败的回调

如果当前Promise对象状态为成功，那么在 new promise((resolve, reject) =>{resolve()}).then(data=>{}) ;then的第一个回调将被调用；

catch：在异步操作抛出异常时触发，如果promise状态为 unfulfilled  也将会被触发；

all :异步操作并行执行，当同时执行完毕后，才会执行

race： 当多个异步操作一同执行，当有一个执行完毕，那么方法将被执行

1.5  一般使用

const getJson = () =>{

    return new Promise((resolve, reject) => {

        setTimeout(()=>{
            
            let a = Math.random()*10;
            if(a<5){
                resolve(a);
            }else{
                reject(a);
            }              

        },1000);    
    });
}

let returnData = getJson().then(data => {
   
    console.log("我是成功回调！"+data);
}).catch( err => {
    
    console.log("我是失败回调！"+err);
})

2. fetch 

2.1 介绍

fetch是用来取代传统的XMLHttpRequest

2.2 基本语法

fetch('user/v1/getInfo',{
    method:'get',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
      'X-Requested-With': 'XMLHttpRequest',
    },
    body: new FormData(document.getElementById('comment-form'))
    //或者
    //body: JSON.stringify({
    //    email: 'huang@163.com'
    //    name: 'jim'
    //})
}).then(response =>{
    const type = 'json';
    //response 这个对象并不与 servlet中的一样
    if(type==='json'){
        return response.text(); //返回一个text的resolve的promise对象
    }else{
        return response.json(); //返回一个json的resolve的promise对象
    }
}).then(data => {
    console.log("返回的数据！");
    //可以设置返回一个 promise对象 的状态

}).catch(err => {
    console.log("请求异常！");

})

2.3 方法对象介绍

Response 代表响应, fetch 的 then 方法接收一个 Response 实例, 当然你也可以手动创建 Response 对象 —— 比如在 service workers 中可能会用到. Response 可以配置的参数包括:

• type - 类型,支持: basic, cors
• url - 响应的 URL
• useFinalURL - Boolean 值, 说明这是否是响应的最终 URL
• status - 状态码 (例如: 200, 404, 等等)
• ok - Boolean值,代表响应是否成功(status 值在 200-299 之间)
• statusText - 与状态码相对应的状态值(例如: OK为200)
• headers - 与响应相关联的 Headers 对象.
• redirected - 指示响应是否是重定向的结果。也就是说，它的 URL 列表有多条目录。

Response 提供的方法如下:

• clone() - 创建一个 Response 对象的克隆.
• error() - 返回一个与网络错误相关的新 Response 对象.
• redirect() - 重定向,使用新的 URL 创建新的 response 对象..
• arrayBuffer() - 返回一个 resolve 是 ArrayBuffer 的 promise 对象。
• blob() - 返回一个 resolve 是 Blob 的 promise 对象。
• formData() - 返回一个 resolve 是 FormData  的 promise 对象。
• json() - 返回一个 resolve 是 JSON 的 promise 对象。
• text() - 返回一个 resolve 是文本的 promise 对象。

Request 对象表示一次 fetch 调用的请求信息。传入 Request 参数来调用 fetch, 可以执行很多自定义请求的高级用法:

• method - 支持 GET, POST, PUT, DELETE, HEAD
• url - 请求的 URL
• headers - 对应的 Headers 对象
• referrer - 请求的引用者（例如：client）
• mode - 是否允许跨域请求，以及哪些响应的属性是可读的。可选值：
• cors：（默认），允许跨域请求，将遵守 CORS 协议。
• no-cors：该模式允许来自 CDN 的脚本、其他域的图片和其他一些跨域资源。前提条件是请求的 method 只能是 HEAD、GET 或 POST。此外，如果 ServiceWorkers 拦截了这些请求，它不能随意添加或者修改除这些之外 Header 属性。第三，js 不能访问 Response 对象中的任何属性，这确保了跨域时 ServiceWorkers 的安全和隐私信息泄露问题。
• same-origin：如果是一个跨域请求，将返回一个 error。
• navigate：支持导航的模式，仅用于 HTML 导航。
• credentials - 设置 cookies 是否随请求一起发送。可选值: 
• omit：（默认），不发送 Cookie。
• same-origin：同域下自动发送 Cookie。
• include：始终发送 Cookie，即使是跨域。
• redirect - 定义重定向处理方式。可选值：follow(默认), error, manual。
• integrity - 子资源完整性值。
• cache - 设置缓存模式。可选值： 
• default：浏览器在其 HTTP 缓存中查找匹配的请求。
•       a. 如果匹配并且是新鲜的，它将从缓存中返回。
•       b. 如果存在匹配但已失效，则浏览器将向远程服务器发出有条件的请求。如果服务器指出资源没有改变，它将从缓存中返回。否则资源将从服务器下载并且缓存将被更新。
•       c. 如果没有匹配，浏览器将发出正常的请求，并且下载的资源更新缓存。
• no-store：浏览器从远程服务器获取资源，而不先查看缓存，并且不会使用下载的资源更新缓存。
• reload：浏览器从远程服务器获取资源，而不先查看缓存，但随后将使用下载的资源更新缓存。
• no-cache：浏览器在其 HTTP 缓存中查找匹配的请求。
•       a. 如果匹配，新鲜或陈旧，浏览器将向远程服务器发出有条件的请求。如果服务器指出资源没有改变，它将从缓存中返回。否则资源将从服务器下载并且缓存将被更新。
•       b. 如果没有匹配，浏览器将发出正常的请求，并用下载的资源更新缓存。
• force-cache：浏览器在其 HTTP 缓存中查找匹配的请求。
•       a. 如果有匹配，新鲜或陈旧，它将从缓存中返回。
•       b. 如果没有匹配，浏览器将发出正常的请求，并用下载的资源更新缓存。
• only-if-cached：浏览器在其 HTTP 缓存中查找匹配的请求。只能用在 mode 为 same-origin 的情况下
•       a. 如果匹配，新鲜或陈旧，将从缓存中返回。
•       b. 如果没有匹配，浏览器将返回一个错误。

3. promise 与 fetch 联合使用

const ajax_ = (url,args,type='json') => {
    
    return new Promise((resolve, reject) => {
      fetch(url,args).then(function (response) {
      let data = '';
      if (type === 'json')
        data = response.json();
      else
        data = response.text();
      return data;
    }).then(data => {
      if (type === 'json' && data.code==404 ) {
        console && console.error('请求异常:'+data.msg);
        reject('请求异常:'+data.msg);
      
      }else {
        resolve(data);
      }
    }).catch(function (ex) {
      console && console.error('请求异常:'+ex);
      reject('请求异常:'+ex);
    });
  });
}

ajax_ ('user/v1/getInfoById',{method:'get',headers:{...},body:{username,password}});