I G U P
web爱好者
Copyright©2018 by igup

异步加载的玩法: 自定义回调函数 / ES6的Promise / 优雅的Promise+ async异步函数+await 

首先看一个简单的例子:

function ajax(){
    setTimeout(()=>{
        console.log(123); 
    },1000)
}
ajax();
console.log(456); 

执行上面代码时候的正常顺序为:   根据预编译规则  会先执行ajax函数    然后值行console打印.   因为ajax这个函数是一个同步的定时函数

, 因为这种模式并不会造成代码的阻塞, 所以得到的结果为:

先  打  印 : 456

然后才是  : 123

有时候我们的理想状态并不是这样的 ,  我们必须要某个函数或者是方法, 执行完成了之后我们才执行另外一个函数或者方法

callback  回调函数就登场了 , 这种异步处理方式很好的解决了我们的问题:

callback (回调地狱):   

function ajax(aaa){
setTimeout(()=>{
console.log(123); //第一步: 先执行这一步
aaa();
console.log(aaa); //第三步: 回调函数aaa执行完后, 才会执行下面的这2个console
console.log(‘这个会最后执行吗?’);
},1000)
}
ajax(()=>{
console.log(456); //第二步: 然后执行这一步回调函数
});

这是一个模拟的数据请求回调    ,当我们数据请求较多的时候, 一层一层的嵌套在ajax(()=>{      }); 里的回调函数会很多, 数据依赖性强 ,数据结构就比较复杂, 处理错误的时候会特别麻烦.   这是es6还没出来的时候常用的方法

ES6的promise   异步解决方案()

//当异步代码执行成功时,我们才会调用resolve(…), 当异步代码失败时就会调用reject(…)

//在本例中,我们使用setTimeout(…)来模拟异步代码,实际编码时可能是XHR请求或是HTML5的一些API方法.

var myFirstPromise = new Promise((resolve, reject)=>{

setTimeout(()=>{

resolve(成功!)          //代码正常执行!

}, 250);

});

//successMessage的值是上面调用resolve(…)方法传入的值.

//successMessage参数不一定非要是字符串类型,这里只是举个例子

myFirstPromise.then((successMessage)=>{

document.write(Yay! + successMessage);

});

promise详解: 

下面为用法的完整真实案例实例:

function ajax(URL) {

return new Promise(function (resolve, reject) {

var req = new XMLHttpRequest();

req.open(‘GET’, URL, true);

 req.onload = function () {

if (req.status === 200) {

resolve(req.responseText);

 } else {

 reject(new Error(req.statusText));

  }
  };
 req.onerror = function () {

reject(new Error(req.statusText));

};
req.send();
});
}
var URL = “https://translate.yandex.net/api/v1.5/tr.json/translatekey=trnsl.1.1.20180720T041444Z.26d5d81df2d8f412.d243d50cff8d1ec04d0e6e51a89e85d17ac6d823&lang=en&text=你好世界”;

ajax(URL).then(function onFulfilled(value){

document.write(‘内容是:’ + value);

}).catch(function onRejected(error){

document.write(‘错误:’ + error);

});

 

ES6的promise  与    async+await  实现最优雅的异步加载

ES7 新特性    Async Functions :   异步函数

function ajax(data){

return new Promise((reslove,resject)=>{

setTimeout(()=>{

reslove(data);

},2000)

})

}

//同时处理多个请求

async function start(){

const one = await ajax(123);

console.log(one);

const two = await ajax(456);

console.log(two);

const three = await ajax(789);

console.log(three);

}

start();

下面为用法的完整真实案例实例:

比上面单独的promise更加简洁优雅

function ajax(URL) {

return new Promise(function (resolve, reject) {

var req = new XMLHttpRequest();

req.open(‘GET’, URL, true);

req.onload = function () {

if (req.status === 200) {

resolve(req.responseText);

} else {

reject(new Error(req.statusText));

}

};

req.onerror = function () {

reject(new Error(req.statusText));

};

req.send();

});

}
var URL = “https://translate.yandex.net/api/v1.5/tr.json/translatekey=trnsl.1.1.20180720T041444Z.26d5d81df2d8f412.d243d50cff8d1ec04d0e6e51a89e85d17ac6d823&lang=en&text=你好世界”;

async function start(){

try {      //数据加载成功的时候执行try

const one = await ajax(URL);

document.write(one);

} catch (err) {     //数据加载错误执行catch

document.write(err);

}

}

start();

2018-07-25
文章归档:

说点什么

  Subscribe  
提醒