js异步编程处理方案

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是异步编程？

众所周知，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的字面意思是等待，好似同步一样获取数据