提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
一、什么是异步编程?
众所周知,js的执行是单线程的,在执行代码上分为同步和异步,如果遇到类似网络请求缓慢时,需要拿到后台数据来进行页面渲染的时候,就需要用到异步编程。
二、解决方案
1.回调函数
代码如下(示例):
//使用setTimeout来模拟后台数据获取
function fn(x, callBack) {
setTimeout(() => {
callBack && callBack(x)
}, 5000)
}
fn(20, function (value) {
console.log(value) //5秒后输出20
})
//bad:这种使用回调函数的方法如果里面嵌套了很多超时操作,冗余代码过多,就很容易形成回调地狱,
2.Promise
代码如下(示例):
Promise属于es6的新提案,还是使用setTimeout来模拟Promise获取异步数据
promise简单粗暴的可以这么理解,将异步代码获取的数据用resolve()包裹起来,然后使用链式写法.then来获取数据。注意的是,使用.then时前面一定要是一个promise对象,而不能是普通的函数
var p = new Promise((resolve,reject)=>{
setTimeout(() => {
var x = 20;
resolve(x) // 成功以后将20传递出去
}, 5000)
})
p.then(res=>{
let y = 30
console.log(y+res) // 50
})
3.终极杀人王Async/await
代码如下(示例):
有人说,async是解决异步的最终武器,下面我们来一起揭开她那神秘的面纱
//async后面定义的函数返回的是一个promise对象,可以将非promise转换为promise
async function fn(){
let x = 20
return x
}
console.log(fn()) //执行
async定义的函数return x后默认用Promise.resolve()包着了;
Promise.resolve(x)理解为new Promise(resolve=>{resolve(x)})
既然返回的是promise,那么就可以链式操作了
fn().then(res=>{console.log(res)}) //20
//async后面定义的函数
function getCount(x){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(x)
},2000)
})
}
async function fn(){
let x = 20
let res = await getCount(x)
console.log(res)
}
fn() //执行
//await必须是在async定义的函数内使用,否则程序就会报错,await的字面意思是等待,好似同步一样获取数据