js 异步和同步,promise

js异步和同步

异步: 不按照代码顺序执行,效率更高
同步: 按照代码的顺序执行

回调函数

回调函数是一个函数,是在我们启动一个异步任务的时候就告诉它: 等你完成这个任务之后要干嘛.这样一来主线程几乎不用关心异步的任务的状态了,它自己就会执行

	function func(){
		document.getElementById("app").innerHTML = "hello"
	}
	setTimeout(func,100)

• setTimeout(func,time)
• func: 是一个回调函数
• time: 毫米数

	setTimeout(function () {
    	document.getElementById("demo1").innerHTML="RUNOOB-1!";
	}, 3000);
	document.getElementById("demo2").innerHTML="RUNOOB-2!";
	// 当未进入setTimeout时,主线程会直接往下执行,此时页面会打印出 RUNOOB-2!
	// 当进入setTimeout时,主线程还会从新往下走一遍,此时页面打印出的内容的顺序是
	// RUNOOB-1! RUNOOB-2!
	//很多为了防止请求时间太长而导致页面无内容的情况,都会使用异步进行请求,使得程序可以继续往下走

异步ajax

• XMLHttpRequest 常常用于请求来自远程服务器上的XML或json 数据.

	var xhr  = new XMLHttpRequest()
	xhr.onload = function(){
		document.getElemetById('app').innerHTML = xhr.responseText
	}
	xhr.onerror = function(){
		document.getElementById('err').innerHTML = "请求出错"
	}
	xhr.open('GET',URL,true)
	xhr.send()

• XMLHttpRequest 的onload 和 onerror 属性都是函数,分别在它请求成功和请求失败时被调用

promise

• promise 是 es6 提供的类,目的是更加优雅的书写复杂的异步任务

构建Pormise

	new Promise( function(resole,reject){
		//需要执行的内容
	})
/**
	有时会我们需要使用多个异步函数来达到效果,但是我们不能够嵌套使用 setTimeout方法,如果嵌套的话很有可能会出问题,而且对于阅读理解也是相当的麻烦
*/
	new Promise( function(resolve,reject){
		setTimeout(function(){
		console.log('first')
			resolve()
		},100)
	}).then(function(){
		return new Promise(function(resolve,reject){
			setTimeout(function(){
			console.log('second')
				resolve()
			},200)
		}
	}).then(function(){
		setTimeout(function(){
			console.log("third")
		},100)
	})
	

promise 使用

• promise 构造函数只要一个参数,就是一个函数,这个函数在构造之后就会直接被异步执行,所以我们称之为起始函数.起始函数有两个参数 resolve 和 reject
• 当promise被构造时,起始函数会被异步执行

	new Promise( function(resolve,reject){
		console.log("需要执行的内容")
	})

• resolve 和 reject都是函数,其中调用 resolve 代表一切都正常, reject 表示出现异常时调用

new Promise(function(resolve,reject){
	var a=0,b=1;
	if(b==0) reject("this is a fault")
	else resolve(a/b)
}).then(function(value){
	console.log('a\b'+value)
}).catch(function(err){
	console.log(err)
}).finally(function(){
	console.log("end")
})

• promise 类有 .then() .catch() .finally() 三个方法
• 每个方法的参数都是一个函数
• .then()可以将参数中的函数添加到当前promise的正常执行序列,传入的函数会按照顺序依次执行,有任何异常都会直接跳到catch序列去
• • .catch()设定promise 的异常处理序列
• .finally() 是promise 执行的最后一定会执行的序列

resolve()可以防止一个参数用于向下一个 then传递一个值,then中的函数也可以返回一个值传递给then.
但是,如果then中返回的是一个pormise对象,那么下一个then将相当于对于这个返回的promise进行操作
reject()参数中一般会传递一个异常给之后的catch函数用于处理异常
** 注意**

• resolve 和 reject 的作用只有起始函数,不包括 then 以及其他序列
• resolve 和 reject 并不能够使起始函数停止运行,别忘记return

promise 函数

返回一个 promise对象的称为 promise函数,常常用于开发基于异步操作的库

function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}


print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});


async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();