js 异步和同步,promise

淡淡的烟草味﹌ 2022-10-10 01:40 186阅读 0赞

## 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函数,常常用于开发基于异步操作的库