异步处理模式

promise的用法

图例.png

  1. const pro = new Promise((resolve, reject)=>{
  2.     // 未决阶段的处理
  3.     // 通过调用resolve函数将Promise推向已决阶段的resolved状态
  4.     // 通过调用reject函数将Promise推向已决阶段的rejected状态
  5.     // resolve和reject均可以传递最多一个参数，表示推向状态的数据
  6. })
  8. pro.then(data=>{
  9.     //这是thenable函数，如果当前的Promise已经是resolved状态，该函数会立即执行
  10.     //如果当前是未决阶段，则会加入到作业队列，等待到达resolved状态后执行
  11.     //data为状态数据
  12. }, err=>{
  13.     //这是catchable函数，如果当前的Promise已经是rejected状态，该函数会立即执行
  14.     //如果当前是未决阶段，则会加入到作业队列，等待到达rejected状态后执行
  15.     //err为状态数据
  16. })

未决阶段的处理函数是同步的，会立即执行
thenable和catchable函数是异步的，就算是立即执行，也会加入到事件队列中等待执行，并且，加入的队列是微队列
pro.then可以只添加thenable函数，pro.catch可以单独添加catchable函数
在未决阶段的处理函数中，如果发生未捕获的错误，会将状态推向rejected，并会被catchable捕获
一旦状态推向了已决阶段，无法再对状态做任何更改
Promise并没有消除回调，只是让回调变得可控
**

案例

ajax

  1.         function ajax(option) {
  2.             return new Promise((resolve, reject) => {
  3.                 var xhr = null;
  4.                 if (window.XMLHttpRequest) {
  5.                     xhr = new window.XMLHttpRequest;
  6.                 } else if (window.ActiveXObject("Microsoft.XMLHttp")) {
  7.                     xhr = new window.ActiveXObject("Microsoft.XMLHttp");
  8.                 } else {
  9.                     alert('浏览器不支持访问数据')
  10.                 }
  11.                 var method = '';
  12.                 var deta = '';
  13.                 var url = option.url;
  14.                 var isAync = typeof option.isAync === 'undefined' ? true : option.isAync;
  15.                 var success = typeof option.success === 'function' ? option.success : function () {};
  16.                 // 判断请求方式 如果是小写将其改为大写
  17.                 if (option.method) {
  18.                     method = option.method.toUpperCase();
  19.                 } else {
  20.                     method = 'GET'
  21.                 }
  22.                 // 判断请求参数，并将对象类型的参数修改为字符串
  23.                 if (typeof option.deta === 'object') {
  24.                     for (var prop in option.deta) {
  25.                         deta += prop + '=' + option.deta[prop] + '&';
  26.                     }
  27.                 } else {
  28.                     deta = option.data;
  29.                 }
  30.                 //是否为get
  31.                 if (option.option === 'GET') {
  32.                     // 请求数据
  33.                     xhr.open(method, url + '?' + deta, isAync);
  34.                     xhr.send();
  35.                 } else {
  36.                     // 此处为post
  37.                     xhr.open(method, url, isAync)
  38.                     xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencode'); //以字符串的形式
  39.                     xhr.send()
  40.                 }
  41.                 // 判断是否请求成功
  42.                 xhr.onreadystatechange = function () {
  43.                     if (xhr.readyState === 4) {
  44.                         if (xhr.status === 200) {
  45.                             // success(JSON.parse(xhr.responseText))
  46.                             resolve(JSON.parse(xhr.responseText))
  47.                         }else{
  48.                             reject(xhr.status)
  49.                         }
  50.                     }
  53.                 }
  54.             })
  55.         }
  56.         const pro = ajax({
  57.             url:'./data/students.json?name=李华'
  58.         })
  59.         //pro: resolved
  60.                 pro.then(data => {
  61.             console.log(data);
  62.         }, err => {
  63.             console.log(err)
  64.         })

案例二

  1.         function love(girl) {
  2.             return new Promise((resolve, reject) => {
  3.                 console.log(`邓哥向女神【${girl}】发出短信`)
  4.                 setTimeout(() => {
  5.                     if (Math.random() < 0.1) {
  6.                         resolve(true)
  7.                     } else {
  8.                         reject(false)
  9.                     }
  10.                 }, 100);
  11.             })
  12.         }
  13.         const  pro = love(1)
  14.         //pro: resolved
  15.                 pro.then(data => {
  16.             console.log(data);
  17.         }, err => {
  18.             console.log(err)
  19.         })    
  20.                 //也可写成
  21.                 //pro: resolved
  22.         pro.then(data => {
  23.             console.log(data)
  24.         })
  25.         pro.catch(err => {
  26.             console.log(err)
  27.         })

案例二

  1.         function love(girl) {
  2.             return new Promise((resolve, reject) => {
  3.                 console.log(`邓哥向女神【${girl}】发出短信`)
  4.                 setTimeout(() => {
  5.                     if (Math.random() < 0.1) {
  6.                         resolve(true)
  7.                     } else {
  8.                         resolve(false)
  9.                     }
  10.                 }, 0);
  11.             })
  12.         }
  14.         let por;
  15.         for (let i = 0; i < 20; i++) {
  16.             if(i == 0){
  17.                 por = love(i)
  18.             }
  19.             por = por.then(value =>{
  20.                 if(value ){
  21.                     console.log(`女神【${i}】回复啦短信`)
  22.                 }else{
  23.                     console.log(`女神【${i}】没有回复啦短信`)
  24.                 }
  25.                 if(i < 19){
  26.                     return love(i + 1);
  27.                 }
  28.             })
  29.         }

回调地狱的代码

  1.       function love(girl ,callback){
  2.             console.log(`邓哥向女神【${girl}】发出短信`)
  3.             setTimeout(() => {
  4.                 if(Math.random()<0.1){
  5.                     callback(true)
  6.                 }else{
  7.                     callback(false)
  8.                 }
  9.             }, 100);
  10.         }
  12.         for(let i = 0 ; i < 3 ; i++){
  13.             love(i+1,result =>{
  14.                 if(result){
  15.                     console.log(`女神【${i+1}】回复啦短信`)
  16.                 }else{
  17.                     console.log(`女神【${i+1}】没有回复啦短信`)
  18.                 }
  20.             })
  21.         }