javaScript 基础知识汇总 (十四)
1、回调
什么是回调?
个人理解,让函数有序的执行。
示例:
function loadScript(src,callback){
let script = document.createElement('script');
script.src = src;
script.onload =()=>calllback(script);
document.head.append(script);
}
loadScript('src',script=>{
alert('ok');
});
也可以在回调函数中继续回调,但是这样会导致回调金字塔,或者地狱。
2、Promise
Promise 对象的构造语法
let promise = new Promise(function(resolve,reject){
//executror
});
promise 对象有内部属性
state -----最初是 pending,然后被改为‘fulfilled“ 或”rejected“
result -----一个任意值,最初是undefined
当executor 完成任务时,应用调用下列之一
消费者:”.then“ 和”.catch"
promise 对象充当生产者,和消费函数之间的连接。
.then 的语法;
promise.then(
function(result){}
function(error){}
);
示例:
let promise = new Promise(function(resolve,reject){
setTimeout(()=>resolve("done"),1000);
});
promise.then(
result=>alert(result),
error=>alert(error)
);
其中成功和失败也可以只选其一,操作如下
只对成功的进行操作;
let promise = new Promise(resolve=>resolve("done!"));
promise.then(alert);
对错误有两种操作
let promise = new Promise((resolve,reject)=>{
setTimeout(()=>reject(new Error("cuole!")),1000);
});
promise.then(null,alert);
简写:promise.catch(alert);
实践
function loadScript(src){
return new Promise(function(resolve,reject){
let script document.createElement('script');
script.src = src;
script.onload=()=>resolve(script);
script.onerror=()=>reject(new Error("Script load error: " + src));
document.head.append(script);
});
}
let promise = loadScript('src');
promise.then(
script=>alert(`${script.src} is loaded!`),
error=>alert(`Error:${error.message}`)
);
promise.then(script=>alert('one more handler to do something');
3、Promises 链
示例:
new Promise(function(resolve, reject) { setTimeout(() => resolve(), ); // (*) }).then(function(result) { // (**) alert(result); //
return result * ; }).then(function(result) { // (***) alert(result); //
return result * ; }).then(function(result) { alert(result); //
return result * ; });
.then 返回的是promises
new Promise(function(resolve, reject) { setTimeout(() => resolve(), ); }).then(function(result) { alert(result); // return new Promise((resolve, reject) => { // (*)
setTimeout(() => resolve(result * ), );
}); }).then(function(result) { // (**) alert(result); // return new Promise((resolve, reject) => {
setTimeout(() => resolve(result * ), );
}); }).then(function(result) { alert(result); // });
这里第一个 .then
显示 1
并在 (*)
行返回 new Promise(…)
,一秒之后它会 resolve 掉,然后 result(resolve
的参数,在这里它是 result*2
)被传递给位于 (**)
行的第二个 .then
。它会显示 2
,而且执行相同的动作。
所以输出还是 1 → 2 → 4,但是现在每次 alert
调用之间会有 1 秒钟的延迟。
示例 loadScript
loadScript("/article/promise-chaining/one.js")
.then(script => loadScript("/article/promise-chaining/two.js"))
.then(script => loadScript("/article/promise-chaining/three.js"))
.then(script => {
// 脚本被加载,我们可以使用声明过的函数了
one();
two();
three();
});
示例 fetch
基本语法: let promise = fetch(url);
function loadJson(url) {
return fetch(url)
.then(response => response.json());
} function loadGithubUser(name) {
return fetch(`https://api.github.com/users/${name}`)
.then(response => response.json());
} function showAvatar(githubUser) {
return new Promise(function(resolve, reject) {
let img = document.createElement('img');
img.src = githubUser.avatar_url;
img.className = "promise-avatar-example";
document.body.append(img); setTimeout(() => {
img.remove();
resolve(githubUser);
}, );
});
} // 使用它们
loadJson('/article/promise-chaining/user.json')
.then(user => loadGithubUser(user.name))
.then(showAvatar)
.then(githubUser => alert(`Finished showing ${githubUser.name}`));
// ...
4、Promise API
在Promise 类中,有5种静态方法。如下
Promise.resolve
语法:let promise = Promise.resolve(value);
function loadCached(url) {
let cache = loadCached.cache || (loadCached.cache = new Map()); if (cache.has(url)) {
return Promise.resolve(cache.get(url)); // (*)
} return fetch(url)
.then(response => response.text())
.then(text => {
cache.set(url,text);
return text;
});
}
Promise.reject
语法: let promise = Promise.reject(error);
let
promise =
new
Promise
(
(
resolve
,
reject)
=>
reject
(
error)
)
;
Promise.all
let promise = Promise.all([...promises...]);
Promise.all([
new Promise(resolve => setTimeout(() => resolve(), )), //
new Promise(resolve => setTimeout(() => resolve(), )), //
new Promise(resolve => setTimeout(() => resolve(), )) //
]).then(alert); // 1,2,3 当 promise 就绪:每一个 promise 即成为数组中的一员
Promise.allSettled
let urls = [
'https://api.github.com/users/iliakan',
'https://api.github.com/users/remy',
'https://no-such-url'
]; Promise.allSettled(urls.map(url => fetch(url)))
.then(results => { // (*)
results.forEach((result, num) => {
if (result.status == "fulfilled") {
alert(`${urls[num]}: ${result.value.status}`);
}
if (result.status == "rejected") {
alert(`${urls[num]}: ${result.reason}`);
}
});
});
Promise.race
语法:let promise = Promise.race(iterable);
Promise.race([
new Promise((resolve, reject) => setTimeout(() => resolve(), )),
new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), )),
new Promise((resolve, reject) => setTimeout(() => resolve(), ))
]).then(alert); //
第一个结果/错误会成为整个 Promise.race
的结果。在第一个 promise 被解决(“赢得比赛[wins the race]”)后,所有后面的结果/错误都会被忽略。
5、Async/await
Async functions
async fucntion f(){
return 1;
}
f().then(alert);//1
async 确保函数返回值是一个promise。
Await
语法:let value = await promise;
要求:await 不能在普通方法中使用,必须在 async 函数中才有效。
async function showAvatar() { // 读取 JSON
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json(); // 读取 github 用户信息
let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
let githubUser = await githubResponse.json(); // 显示头像
let img = document.createElement('img');
img.src = githubUser.avatar_url;
img.className = "promise-avatar-example";
document.body.append(img); // 等待 3 秒
await new Promise((resolve, reject) => setTimeout(resolve, )); img.remove(); return githubUser;
} showAvatar();
在类方法中的使用
class Waiter{
async wait(){
retrun await Promise.resolve(1);
}
}
new Waiter()
.wait()
.then(alert);//1
javaScript 基础知识汇总 (十四)的更多相关文章
- javaScript 基础知识汇总(四)
1.对象 概念:对象可以通过花括号{...} 和其中包含一些可选的属性来创建. 属性时一个键值对,键是一个字符串,值可以是任何类型. 对象的创建 let user = new Object(); // ...
- JavaScript 基础知识汇总目录
一.标签.代码结构.现代模式.变量.数据类型.类型转换 GO 二.运算符.值的比较.交互.条件运算符.逻辑运算符 GO 三.循环 while 和 for .switch语句.函数.函数表达式和箭头函数 ...
- javaScript 基础知识汇总 (十)
1.New Function 语法:let func = new Function ([arg1[, arg2[, ...argN]],] functionBody) //无参数示例: let say ...
- javaScript 基础知识汇总 (十二)
1.属性的标志和描述符 属性的标志 对象属性除value外还有三个特殊属性,即标志 writable ----如果为true,则可以修改,否则它只是只读的. enumerable ----如果为tru ...
- javaScript 基础知识汇总 (十五)
1.模块简介 什么是模块: 模块就是一个文件,一个脚本,通过关键字export 和 import 交换模块之间的功能. export 关键字表示在当前模块之外可以访问的变量和功能. import 关键 ...
- JavaScript基础知识总结(四)
JavaScript语法 八.函数 函数就是完成某个功能的一组语句,函数由关键字function + 函数名 + 加一组参数定义: 函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可 ...
- JavaScript基础知识汇总
1. 图片热区: <img src="logo.jpg" usemap="#logo"> <map id="logo" n ...
- javascript基础学习(十四)
javascript之表单对象 学习要点: 表单对象 文本框 按钮 单选框和复选框 一.表单对象 在HTML文档中可能会出现多个表单,也就是说,一个HTML文档中可能出现多个<form>标 ...
- JavaScript基础笔记(十四)最佳实践
最佳实践 一)松散耦合 1.解耦HTML/JavaScript: 1)避免html种使用js 2)避免js种创建html 2.解耦CSS/JS 操作类 3.解耦应用逻辑和事件处理 以下是要牢记的应用和 ...
随机推荐
- JavaScript学习总结(五)原型和原型链详解
转自:http://segmentfault.com/a/1190000000662547 私有变量和函数 在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量 ...
- 翻转链表和k个一组翻转以及两两反转
一.输入一个链表,输出反转后的链表. 非递归实现: # -*- coding:utf-8 -*- # class ListNode: # def __init__(self, x): # self.v ...
- MYSQL语句中的explain
1.使用mysql explain的原因 在我们程序员的日常写代码中,有时候会发现我们写的sql语句运行的特别慢,导致响应时间特别长,这种情况在高并发的情况下,我们的网站会直接崩溃,为什么双十一的淘宝 ...
- LVS(注意iptables和selinux的问题)
1.LVS(高负载) LVS(Linux虚拟服务器) Linux Virtual Server LVS集群采用IP负载均和技术和基于内容请求分发技术.调取器具有很好的吞吐率,将请求均衡的转移到不同的服 ...
- idea(or maven) 未结束字符串字面值 非法的表达式开始
[ERROR] *.java:[38,27] 未结束的字符串字面值 [ERROR] *.java:[38,53] 需要 ';' [ERROR] *.java:[41,19] 需要 ')' [ERROR ...
- Service层在MVC框架中的意义和职责
https://blog.csdn.net/u012562943/article/details/53462157 mvc框架由model,view,controller组成,执行流程一般是:在con ...
- [洛谷P3386] [模板] 二分图匹配 (匈牙利算法)
题目传送门 毒瘤出题人zzk出了个二分图匹配的题(18.10.04模拟赛T2),逼我来学二分图匹配. 网络流什么的llx讲完之后有点懵,还是匈牙利比较好理解(绿与被绿). 对于左边的点一个一个匹配,记 ...
- java 7 try with resources理解
参考文档: 官方文档:http://docs.oracle.com/javase/7/docs/technotes/guides/language/try-with-resources.html#su ...
- SpringMVC引入CSS等文件
在默认情况下Spring MVC 拦截了所有请求,所以自己要把静态资源配置起来,IDEA 在Spring-service 配置,eclipse在自己新建的SpringMVC配置文件里配置,如下代码 & ...
- centos7开启ntp并同步时间到指定时区
前提:近期公司都是使用的直接对外的云服务器,在登上服务器后用date命令查看新服务器的时间,发现并不是标准时间,于是需要做时间同步.我这里讲的是能连接外网的情况下,在服务器不多的情况下是否此方法,大型 ...