学习随笔之 Promise、fetch

Promise 一种异步的解决方案

Promise 构造函数

new Promise( function(resolve, reject) {...} /* executor */  );

---

fetch()

封装了Promise提供了更简洁的展示方式这个函数最后会返回成Promise
fetch() 函数接口

Promise<Response> fetch(input[, init]);

Promise 的简单使用实例

var Asyn=function myAsyncFunction(url) {
         return new Promise((resolve,reject)=>{
            const xhr=new XMLHttpRequest();
            xhr.open("GET",url);
            xhr.onload=()=>resolve(xhr.responseText);
            xhr.onerror=()=>reject(xhr.statusText);
            xhr.send();
         });
     }
//resolve,reject这个是可以改的
//更加简洁的写法
var Asyn1=(url)=>{
        return new Promise((y,n)=>{
           var x=new XMLHttpRequest();
            x.open("GET",url);
            x.onload=()=>y(x.response);
            x.onerror=()=>n(x.status);
            x.send();
        });
    }
 //调用
  var u="https://v1.hitokoto.cn/?encode=json";
  //返回的是JSON的字符串
  Asyn1(u).then(t=>console.log(t)).catch(e=>console.log(e)); 
  //返回JSON对象 这里跟fetch有区别t不能直接.json()
  Asyn1(u).then(t=>console.log(JSON.parse(t))).catch(e=>console.log(e));

fetch的简单实例

var u="https://v1.hitokoto.cn/?encode=json";
fetch(u).then(r=>r.text()).then(r=>console.log(r)).catch(e=>console.log("%c 获取数据失败", "color:red"));
fetch(u,{method:'POST'}).then(r=>r.json()).then(r=>console.log(r)).catch(e=>console.log("%c 获取数据失败", "color:red"));

---

优质文章推荐

传统 Ajax 已死，Fetch 永生
fetch 的使用

---

更多的写法还请参照官方的API文档这里不会介绍的很详细,请参照具体使用场景使用 共勉
对我而言这或许是Ajax的替代品或许不是

---