用于异步(了解)

    1. // Promise 承诺
    2. // 相当于一个容器，保存着未来才会结束的事件(异步操作)的一个结果
    3. // 各种异步操作都可以用同样的方法进行处理 axios
    5. // 特点：
    6. // 1.对象的状态不受外界影响  处理异步操作 三个状态  Pending(进行)  Resolved(成功) Rejected(失败)
    7. // 2.一旦状态改变，就不会再变，任何时候都可以得到这个结果
    9. /*
    10. let pro = new Promise(function(resolved,rejected) {
    11.     //执行异步操作
    12.     let res = {
    13.         code: 201,
    14.         data:{
    15.             name:'小马哥'
    16.         },
    17.         error:'失败了'
    18.     }
    19.     setTimeout(() => {
    20.         if(res.code === 200){
    21.             resolved(res.data);
    22.         }else{
    23.             rejected(res.error);
    24.         }
    25.     }, 1000);
    26. })
    27. console.log(pro);
    28. pro.then((val)=>{
    29.     console.log(val);
    31. },(err)=>{
    32.     console.log(err);
    34. });
    35. */
    37. /* function timeOut(ms) {
    38.     return new Promise((resolved,rejected)=>{
    39.         setTimeout(() => {
    40.             resolved('hello promise success!!')
    41.         }, ms);
    42.     })
    43. }
    44. timeOut(2000).then((val)=>{
    45.     console.log(val);
    47. }) */
    49. // // https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976
    50. // const getJSON = function (url) {
    51. //     return new Promise((resolve, reject) => {
    52. //         const xhr = new XMLHttpRequest();
    53. //         xhr.open('GET', url);
    54. //         xhr.onreadystatechange = handler;
    55. //         xhr.responseType = 'json';
    56. //         xhr.setRequestHeader('Accept', 'application/json');
    57. //         // 发送
    58. //         xhr.send();
    60. //         function handler() {
    62. //             if (this.readyState === 4) {
    63. //                 if (this.status === 200) {
    64. //                     resolve(this.response.HeWeather6);
    65. //                 } else {
    66. //                     reject(new Error(this.statusText));
    67. //                 }
    68. //             }
    70. //         }
    71. //     })
    72. // }
    73. // let a = getJSON(
    74. //         'https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976')
    75. //     .then((data) => {
    76. //         // console.log(data);
    77. //         return data[0]
    78. //     }).then((obj)=>{
    79. //         console.log(obj);
    82. //     })
    83. // console.log(a);
    85. /* 
    86. catch(err=>{
    88. })
    90.     // then(null,err=>{
    92.     // })
    94. */
    96. // getJSON('https://free-ap.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976')
    97. //     .then(data => {
    98. //         console.log(data);
    99. //     }).catch(err => {
    100. //         console.log(err);
    101. //     })
    104. // then()方法 
    105. // then() 第一个参数是relove回调函数，第二个参数是可选的 是reject状态回调的函数
    106. // then()返回一个新的promise实例，可以采用链式编程 
    109. // resolve()  reject() all() race()  done() finally()
    111. // resolve()能将现有的任何对象转换成promise对象
    112. // let p = Promise.resolve('foo');
    113. /*  let p = new Promise(resolve=>resolve('foo'));
    114.     p.then((data)=>{
    115.         console.log(data);
    117.     }) */
    119. // 应用：一些游戏类的素材比较多，等待图片、flash、静态资源文件 都加载完成 才进行页面的初始化
    120. /* let promise1 = new Promise((resolve, reject) => {});
    121. let promise2 = new Promise((resolve, reject) => {});
    122. let promise3 = new Promise((resolve, reject) => {});
    124. let p4 = Promise.all([promise1, promise2, promise3])
    126. p4.then(()=>{
    127.     // 三个都成功  才成功
    128. }).catch(err=>{
    129.     // 如果有一个失败 则失败
    130. }) */
    132. // race() 某个异步请求设置超时时间，并且在超时后执行相应的操作
    133. // 1 请求图片资源
    134. function requestImg(imgSrc) {
    135.     return new Promise((resolve, reject) => {
    136.         const img = new Image();
    137.         img.onload = function () {
    138.             resolve(img);
    139.         }
    140.         img.src = imgSrc;
    141.     });
    142. }
    144. function timeout() {
    145.     return new Promise((resolve, reject) => {
    146.         setTimeout(() => {
    147.             reject(new Error('图片请求超时'));
    148.         }, 3000);
    149.     })
    150. }
    151. Promise.race([requestImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566364222518&di=b3c6d411bb23f17d1798fc6be3325ad5&imgtype=0&src=http%3A%2F%2Fpic.k73.com%2Fup%2Fsoft%2F2016%2F0102%2F092635_44907394.jpg'),timeout()]).then(data=>{
    152.     console.log(data);
    153.     document.body.appendChild(data);
    155. }).catch(err=>{
    156.     console.log(err);
    158. });
    160. /* 
    161. server.listen(3000).then(()=>{
    163. }).finally(server.stop());
    164. */