企业网站使用不规范地图如何处罚,安卓app市场,上海最好网站建设公司,做招聘网站的要求JavaScript异步类型 延迟类型#xff1a;setTimeout、setInterval、setImmediate监听事件#xff1a;监听new Image加载状态、监听script加载状态、监听iframe加载状态、Message带有异步功能类型#xff1a; Promise、ajax、Worker、async/awaitJavaScript常用异步编程 Prom… JavaScript异步类型 延迟类型setTimeout、setInterval、setImmediate监听事件监听new Image加载状态、监听script加载状态、监听iframe加载状态、Message带有异步功能类型 Promise、ajax、Worker、async/awaitJavaScript常用异步编程 Promise Promise有几个特点 对象的状态不受外界影响有三种状态pending(进行中)、fulfilled(成功)、rejected(失败)。只有异步操作的结果可以决定当前是哪种状态其他操作无法改变。状态一旦改变就不会再变任何时候都可以得到这个结果。状态改变只可能是pending - fulfilled 或 pending - rejected实例化后会立即执行一次。所以一般将其用函数包裹起来使用的时候调用一次。如果执行后的回调也要做一些异步操作可以无限的.then下去当然要保证有返回值 方法 原型方法 all race reject resolve对象方法 then catch finally(ES9) function promiseTest(n,msg) {return new Promise((resolve,reject){setTimeout(function () {console.log(执行第${n}个任务);msg.code resolve(msg.text); // 当认为成功的时候调用resolve函数!msg.code reject(msg.text); // 当认为失败的时候调用reject函数},n*500)});
}
let pro promiseTest(1,{code:true,text:返回的数据1});
/* 没有catch每个then里两个回调函数此时第一个为成功的回调第二个为失败的回调 */
pro.then((data){console.log(data); // 执行成功结果在这里// return promiseTest(2,{code:true,text:返回的数据2});return promiseTest(2,{code:false,text:失败的数据});
},(err){console.log(err); // 执行失败的结果在这里
}).then((data){console.log(data)},(err){console.log(err)}); 观察then和catch的用法 在多次then后最后跟一个catch,可以捕获所有的异常 /* 多个then和一个catch */
pro.then((data){console.log(data);return promiseTest(2,{code:false,text:失败的数据});
}).then((data){console.log(data)
}).catch((err,data){console.log(失败了,err);
}); all和rece的用法 all接收一个promise对象列表.在所有异步操作执行完且全部成功的时候才执行then回调只要有一个失败就执行catch回调(只对第一个失败的promise对象执行)。race也接收一个promise对象列表不同的是哪个最先执行完对应的那个对象就执行then或catch方法(then或catch只执行一次)。 /* all的用法 */
Promise.all([promiseTest(1,{code:true,text:返回的数据1}),promiseTest(2,{code:false,text:返回的数据2}),promiseTest(3,{code:false,text:返回的数据3})
]).then((res){console.log(全部成功,res)}).catch((err){console.log(失败,err);});/* race的用法 */
Promise.race([promiseTest(1,{code:false,text:返回的数据1}),promiseTest(2,{code:false,text:返回的数据2}),promiseTest(3,{code:true,text:返回的数据3})
]).then((res){console.log(成功,res)}).catch((err){console.log(失败,err);}); Generator Generator是什么叫做生成器通过function*关键字来定义的函数称之为生成器函数generator function与Python的语法一模一样 生成器有3个方法都有一样的返回值{value,done} .next(value) value为向生成器传递的值。.return(value) value为需要返回的值。该方法返回给定的值并结束生成器。.throw(exception) exception用于抛出的异常。该方法用来向生成器抛出异常并恢复生成器的执行。生成器的作用 可以和 Promise 组合使用。减少代码量写起来更方便。在没有Generator时写Promise会需要很多的then每个then内都有不同的处理逻辑。现在我们将所有的逻辑写进一个生成器函数或者在生成器函数内用yield 进行函数调用Promise的每个then内调用同一个函数即可。 定义生成器 function add(a,b) {console.log();return ab;
}
function cut(a,b) {console.log(-);return a-b;
}
function mul(a,b) {console.log(*);return a*b;
}
function division(a,b) {console.log(/);return a/b;
}
function* compute(a, b) {yield add(a,b);yield cut(a,b);let value yield mul(a,b);console.log(value,value); // 第三次调用.next()时无法为value赋值需要第四次调用才能为其赋值yield mul(a,b);yield division(a,b);
} 使用生成器 // 执行一下这个函数得到 Generator 实例调用next()方法执行遇到yield暂停
let generator compute(4, 2);function promise() {return new Promise((resolve, reject) {let res generator.next();if(res.value 5){resolve(OK);}else{reject(小于5)}});
}let proObj promise();
proObj.then((data){console.log(data);let res generator.next();console.log(Promise res1,res);
}).then((data){let res generator.next();// let res generator.return();console.log(Promise res2,res);
}).then((data){let res generator.next(qwe); // 第四次next()时向生成器传数据console.log(Promise res3,res)
}).catch((err){console.log(出错,err);
}); async/await 优点简洁节约了不少代码 被async修饰的函数总会返回一个Promise对象。如果代码中返回值不是promise对象它会将其包装成promise对象的resolved值await只能在async函数内使用。它是一个操作符等待一个函数或表达式。经过该操作符处理后输出一个值。如果在异步函数中每个任务都需要上个任务的返回结果可以这么做 function takeLongTime(n) {return new Promise((resolve,reject) {setTimeout(() {resolve(n 200)}, n);});
}function step1(n) {console.log(step1 with ${n});return takeLongTime(n);
}function step2(m, n) {console.log(step2 with ${m} and ${n});return takeLongTime(m n);
}function step3(k, m, n) {console.log(step3 with ${k}, ${m} and ${n});return takeLongTime(k m n);
}async function doIt() {console.time(doIt);const time1 300;const time2 await step1(time1);const time3 await step2(time1, time2);const result await step3(time1, time2, time3);console.log(result is ${result});console.timeEnd(doIt);
}
doIt(); 如果这几个任务没有关联可以这样做 async function doIt() { // 函数执行耗时2100msconsole.time(doIt);await step1(300).catch((err){console.log(err)}); // 异常处理await step1(800);await step1(1000);console.timeEnd(doIt);
}
doIt(); 当然最好这样做 async function doIt() { // 函数执行耗时1000msconsole.time(doIt);const time1Pro step1(300);const time2Pro step1(800);const time3Pro step1(1000);await time1Pro;await time2Pro;await time3Pro;console.timeEnd(doIt);
}
doIt(); 注意 async/await并没有脱离Promise它的出现能够更好地协同Promise工作。 怎么体现更好地协同它替代了then catch的写法。使得等待promise值的操作更优雅更容易阅读和书写。函数仅仅加上async并没有意义它仍然是同步函数只有与await结合使用它才会变成异步函数。 这需要精准理解await。它在等待的时候并没有阻塞程序此函数也不占用CPU资源使得整个函数做到了异步执行。doIt()函数内部是串行执行的但它本身是异步函数。在这个异步函数内可能会做很多操作ABC,他们有执行的先后顺序。这时你可能会想A、B、C之间没有关联他们之间可以是并行执行的并不需要串行那怎么办 【错误想法】这样想没错但是没必要。因为他们已经存在于异步函数内了所有的操作已经是异步的。在同样的环境情景下,底层执行的效率是相同的并不见得因为A和B之间互相异步而提高效率。【正确想法】这样想是有必要的。参照两个doIt(),调用的函数返回promise对象前者是依次生成promise对象(依次执行任务)依次等待返回结果。等待总时长取决于所有任务执行时间之和。后者则是同时生成promise对象(同时执行任务)依次等待。等待总时长取决于耗时最长的任务。后者的CPU运用率更高。错误处理。最标准的方法是使用try...catch语句但是它不仅会捕捉到promise的异常还会将所有出现的异常捕获。因此可以使用.catch,只会捕获promise相关的异常。 转载于:https://www.cnblogs.com/V587Chinese/p/11437051.html
