promise用法详解

es6的promise可谓是异步书写的一大福音，过去异步js书写是函数嵌套函数的方式，promise出现后书写异步js代码就变得美观得多了

以前的写法：回调函数不停嵌套

ajax('/banners', function (banner_data){
  ajax('/hotItems', function (hotitem_data){
    ajax('/slides', function (slide_data){
      ajax('/slides', function (slide_data){
 
      }, function (){
        alert('读取失败');
      });
    }, function (){
      alert('读取失败');
    });
  }, function (){
    alert('读取失败');
  });
}, function (){
  alert('读取失败');
});

Promise写法：

Promise.all([promise1,promise2..]).then(res=>{},err=>{})

这个方法是等数组所有异步请求都返回结果才执行then，都成功执行第一个回调函数，其中一个失败了就执行第二个回调函数

Promise.all([
      promise1,
      promise2
    ]).then(function (results){
      let [data1, data2]=results;
      alert('成功了');
      console.log(arr, json);
    }, function (err){
      alert('失败了');
    });

Promise.race([promise1,promise2..]).then(res=>{},err=>{})

这个方法跟之前的all用法一样，不同的是数组里面的任意一个异步请求先返回了结果就马上执行第一个回调函数，常用语请求不同服务器的同一样资源，以求达到最快响应速度。

ps: then里面的回调函数可以return Promise和一般值。

如果返回一般值，则链式的下个回调函数直接在下个微任务执行。

如果返回Promise, 则链式的下个回调函数会等到这个Promise resolve才会执行。

---

fetch

Fetch 是浏览器提供的原生 AJAX 接口。

由于原来的XMLHttpRequest不符合关注分离原则，且基于事件的模型在处理异步上已经没有现代的Promise等那么有优势。因此Fetch出现来解决这种问题。

Fetch API 提供了能够用于操作一部分 HTTP 的 JavaScript 接口，比如 requests 和 responses。它同时也提供了一个全局的 fetch() 方法——能够简单的异步的获取资源。 
使用 window.fetch 函数可以代替以前的 $. ajax、$.get 和 $.post。可以说fetch把xml(原生ajax)和promise完美的融合在一起了~~

如果没有fetch,promise写法就会变得异常恶心：

let promise = new Promise((resolve,reject)=>{
    let xhr = new XMLHttpRequset();
    xhr.open('GET','url~~~',true);
    xhr.send();
    xhr.onreadystatechange =function(){
        if(xhr.readyState==4&&xhr.status==200){
            resolve(JSON.parse(xhr.responseText));
        }else{
            reject()
        }
    }
});
promise.then(function(){~~~},function(){~~~})

居然要在promise里面写事件绑定，这种写法是显然与promise的写法格格不入，所以fetch出现了

---

下面介绍下fetch的写法：

• get

fetch('/test/content.json').then(function(data){
    return data.json();  //这里返回的是promise
}).then(function(data){
    console.log(data);
}).catch(function(error){
    console.log(error);
});

• post

fetch('/test/content.json', { // url: fetch事实标准中可以通过Request相关api进行设置
    method: 'POST',
    mode: 'same-origin', // same-origin|no-cors（默认）|cors
    credentials: 'include', // omit（默认，不带cookie）|same-origin(同源带cookie)|include(总是带cookie)
    headers: { // headers: fetch事实标准中可以通过Header相关api进行设置
        'Content-Type': 'application/x-www-form-urlencoded' // default: 'application/json'
    },
    body: 'a=1&b=2' // body: fetch事实标准中可以通过Body相关api进行设置
}).then(function(res){ //res: fetch事实标准中可以通过Response相关api进行设置
    return res.json();  //这里返回的是promise
}).then(function(data){ 
　　 console.log(data); 
}).catch(function(error){ });