首先，我们必须了解两个主要概念
同步编程
异步编程
它等待每个语句完成执行，然后再转到下一条语句。
如果语句不相互依赖，但是由于它们在队列中，它们仍在等待执行，则此方法可能会减慢应用程序的速度。
在移动到下一条语句之前，它不等待当前语句完成执行。例如，调用Web服务并使用JavaScript执行文件复制。
调用Web服务可能需要一些时间才能返回结果，同时我们可以完成其他一些操作。
服务器提供结果后，我们无需等待就可以对其进行处理。
我们的三种方法1.回调2.承诺3.异步/等待处理异步编程。
const articles = [
{title:'First article'},
{title:'Second article'}
];
function getArticles(){
setTimeout(()=>{
let articleContent='';
articles.forEach((article,index)=>{
articleContent+=`${article.title}`+` `;
});
console.log(articleContent);
},1000);
};
getArticles();在这里，我们仅创建了一个商品数组，并在1秒钟后打印在控制台上。
将setTimeout函数与1秒时间配合使用只是为了展示服务器行为。
现在，如果我们通过另一个功能将新文章添加到上述列表中，该怎么办
function createArticle(article){
setTimeout(()=>{
articles.push(article);
},2000);
}如果我们现在先用新文章先调用createArticle，然后再用getArticle进行调用，那么我们应该获得三篇文章，但是只有前两篇文章
const articles = [
{title:'First article'},
{title:'Second article'}
];
function getArticles(){
setTimeout(()=>{
let articleContent='';
articles.forEach((article,index)=>{
articleContent+=`${article.title}`+` `;
});
console.log(articleContent);
},1000);
};
function createArticle(article){
setTimeout(()=>{
articles.push(article);
},2000);
}
createArticle({title:'Third article'});
getArticles();
//控制台输出
"First article Second article "为什么会这样呢？
因为createArticle的执行有2秒的超时，与此同时getArticle完成了执行
const articles = [
{title:'First article'},
{title:'Second article'}
];
function getArticles(){
setTimeout(()=>{
let articleContent='';
articles.forEach((article,index)=>{
articleContent+=`${article.title}`+` `;
});
console.log(articleContent);
},1000);
};
function createArticle(article, callback){
setTimeout(()=>{
articles.push(article);
callback();
},2000);
}
createArticle({title:'Third article'},getArticles);
//控制台输出
"First article Second article Third article "我们使用回调将getArticle的调用嵌套在createArticle中。
请注意，将getArticles作为参数传递给createArticle函数。但是这样，嵌套回调变得复杂
通过使用promises，我们不需要传递回调函数。承诺有两个论点：解决和拒绝。如果函数成功执行，我们可以调用resolve()其他函数reject()
const articles = [
{title:'First article'},
{title:'Second article'}
];
function getArticles(){
setTimeout(()=>{
let articleContent='';
articles.forEach((article,index)=>{
articleContent+=`${article.title}`+` `;
});
console.log(articleContent);
},1000);
};
function createArticle(article){
return new Promise((resolve,reject)=>{
articles.push(article);
let isError=false;
if(!isError){
resolve();
} else {
reject();
}
});
}
createArticle({title:'Third article'})
.then(getArticles());
//控制台输出
"First article Second article Third article "
handling error with promises:
const articles = [
{title:'First article'},
{title:'Second article'}
];
function getArticles(){
setTimeout(()=>{
let articleContent='';
articles.forEach((article,index)=>{
articleContent+=`${article.title}`+` `;
});
console.log(articleContent);
},1000);
};
function createArticle(article){
return new Promise((resolve,reject)=>{
articles.push(article);
let isError=true;
if(!isError){
resolve();
}else{
reject('Something went wrong');
}
});
}
createArticle({title:'Third article'})
.then(getArticles())
.catch(error=>console.log(error));
//控制台输出
"Something went wrong"我们从createArticle调用reject并捕获了错误
const promise1=Promise.resolve('Hello');
const promise2=100;
const promise3=new Promise((resolve,reject)=>{
setTimeout(resolve,2000,'test');
});
Promise.all([promise1,promise2,promise3])
.then((values)=>console.log(values));
//控制台输出
["Hello", 100, "test"]我们可以将诺言合并到一个数组中，然后使用实际的then语句，而不是在每个诺言之后嵌套then语句
我们可以使用jsonplaceholder的fetch api
const promise0=fetch('https://jsonplaceholder.typicode.com/users').then(res=>res.json());
const promise1=Promise.resolve('Hello');
const promise2=100;
const promise3=new Promise((resolve,reject)=>{
setTimeout(resolve,2000,'test');
});
Promise.all([promise0,promise1,promise2,promise3])
.then((values)=>console.log(values));要使用await on语句，该功能应标记为异步
<!DOCTYPE html>
<html>
<head>
<title>Async/Await Example</title>
</head>
<body>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const articles = [
{title:'First article'},
{title:'Second article'}
];
function getArticles(){
setTimeout(()=>{
let articleContent='';
articles.forEach((article,index)=>{
articleContent+=`${article.title}`+` `;
});
console.log(articleContent);
},1000);
}
function createArticle(article){
articles.push(article);
}
async function testAsync(){
await createArticle({title:'Third article'});
getArticles();
}
testAsync();
//控制台输出
//第一篇第二篇第三篇
</script>
</body>
</html>testAsync函数被标记为异步，并且我们使用了等待createArticle函数来首先完成它。然后我们打电话给getArticles()。
使用async / await是Promise的更好版本，并使代码更简洁