一、异步的定义
js是单线程语言,执行任务的情况是根据任务顺序,前一个任务完成之后执行下一个任务。异步就是改变事件的执行顺序。
举个例子
var f1 = function (){
setTimeout(function () {
console.log(1);
},1000);
console.log(2);
};
f1 ();
此时完成一个最简单的异步。
二、异步的用法(只讲回调函数、promise和anysc)
2.1回调函数
回调函数,把一个函数当作参数传进另一个函数中去执行,形成回调。
var f1 = function (callback) {
callback();
console.log('1');
};
f1(function(){
console.log('2');
})
此时完成一个最简单的回调函数。回调函数的应用场景,需要顺序执行函数,或者增加代码的可变性。回调函数只是因为函数调用的方式不同而被称为回调函数,其本质和普通函数没有任何区别。
2.2promise
let n = 1;
let m = 1;
function add() {
return new Promise(function(resolve,reject){
console.log(n);
setTimeout(() => {
n++;
resolve(m*10);
},1000)
})
}
add().then(add).then(add).then(function(date){
console.log(date)});
//打印结果1 2 3 10
一个Promise带有2个参数resolve和reject,代表着2个状态,Promise执行的结果,resolve或者reject。上面代码可以就是一个简单的Promise,1秒后返回reslove(m*10),但时最后一步可以看得出,reslove()的作用只是携带参数返回。一个Promise执行结果reslove或者reject的话,会返回一个Promise对象并携带reslove(或rejcet中的参数。
axios就是一个Promise的用法
axios.get(’/user?ID=12345’)
.then(function (date) {
console.log(date);
})
.catch(function (error) {
console.log(error);
});
axios是一个Promise对象,在执行完成之后会返回一个Promise对象指向resolve(date)或者reject(error)。
关键点,Promise本身是一个函数,其本身执行完成后,会转化成resolve或者reject状态返回出去,.then可以进行链式调用,对象为前一个Promise的reslove(date),.catch可以获取reject状态的参数reject(error)。
2.3async
async说白了就是Promise的简写版,任意一个函数前面加上async,那么这个函数就会变成一个Promise对象。
let n = 1;
let m = 1;
async function add (){
console.log(n);
try {
await new Promise((resolve,reject) => {
setTimeout(() => {
n++;
resolve(m*10);
},1000)
})
}catch (error) {
console.log(error);
}
return m*100
}
add().then(add).then(add).then( date => {
console.log(date);
});
//打印1 2 3 4 100
和Promise区别:
1await后接的函数,代表该函数执行完再执行后续步骤。
2async指向reject需要在函数内加成try{} catch(error){] 捕获错误。
3async中return的参数等同于Promise中resolve效果,即作为参数传递至下一个.then中。
4async的reject状态直接在函数内体现,而不影响后续执行。
但是其本质以及用法和Promise没有太大区别。
三、异步的作用
其实异步方法还有很多,不一一说明。异步的作用,可以说是精确控制函数执行的顺序、合理利用系统内存以加快页面加载。