你应该学习的 JS 异步编程与Promise，还有async与await实例详解

目录

1.首先看下例子：通过文件加载了解任务排序

2.promise.then方法也是一个promise对象

3.then返回值的处理技巧：then返回promise中的成功或者失败的结果， 在then之后的then返回then中return中的值 如果返回的是promise则返回promise成功或者失败的结果 eg:

 4.其他类型的promise封装：

 5.用promise封装ajax:    ​

 6.封装setTimeout定时器

7.构建扁平化的setInterval ：实现div向右移动到left=200px停止 开始缩小宽度到10px停止缩放背景变红色

---

从今天开始我就把自己学习异步编程 promise /async/await的学习做个总结：有新的关于这方面的知识我就会放到里面 博客会不断的更新 我这里总结的都是需要注意的  基础的东西可能不太全  没学过promise可以去看看基础教程promise之后在看这个！

1.首先看下例子：通过文件加载了解任务排序

eg:

js是单线程的，文件首先加载主线程同步的任务，从上到下依次执行 ：

1.首先打印同步的console.log(ele.src);但是是空值，还没有加载文件完成 这需要一个过程 是个异步执行的宏任务 

2.执行console.log(21121)打印

3.加载onload中的函数：1.js文件加载完成加载2.js文件 加载完2.js之后调用2.js中的two函数 two中首先调用了one()函数，one是   1.js文件已经加载完成，所以执行one里面的console.log('one');console.log('1.js文件中的one函数执行完成')；之后执行   console.log('two');

截图看加载代码的结果如下：

2.promise.then方法也是一个promise对象

3.then返回值的处理技巧：then返回promise中的成功或者失败的结果， 在then之后的then返回then中return中的值 如果返回的是promise则返回promise成功或者失败的结果 eg:

 4.其他类型的promise封装：

tip:返回的只要是对象或者类的方法里面有then就会自动封装册成promise对象 在下一个then中接收这个方法并且处理这个结果

     eg:       

 5.用promise封装ajax:
    

 6.封装setTimeout定时器

7.构建扁平化的setInterval ：实现div向右移动到left=200px停止 开始缩小宽度到10px停止缩放背景变红色

 8.promise队列原理  上一个promise执行完成之后返回结果下一个promise才执行

let promise=Promise.resolve('成功');
	promise=promise.then((v)=>{
		return new Promise((resolve,reject)=>{
			setTimeout(()=>{
	               console.log(1)
	               resolve('ok')
			},1000)
		})
	})
	promise.then((res)=>{
		return new Promise((resolve,reject)=>{
			setTimeout(()=>{
				console.log(2);
				resolve('ok');
			})
		})
	})

9.async/await语法糖：async 返回promise对象  await 等待的new Promise结果这个执行之后才执行下面的代码

10.async延时函数：

11.await实现加载进度条：

	
	


	
0%asdasdsad