//==回调地狱的解决方法 , 实际的业务问题:我们需要按顺序获取:产品数据=>用户数据=>评论数据
//1.传统的写法:
// 获取产品数据
ajax('products.json', (products) => {
console.log('AJAX/products >>>', JSON.parse(products));
// 获取用户数据
ajax('users.json', (users) => {
console.log('AJAX/users >>>', JSON.parse(users));
// 获取评论数据
ajax('products.json', (comments) => {
console.log('AJAX/comments >>>', JSON.parse(comments));
});
});
});
//2.用promise(ES6)封装ajax:
//封装 Ajax,返回一个 Promise
function requestP(url) {
return new Promise(function(resolve, reject) {
ajax(url, (response) => {
resolve(JSON.parse(response));
});
});
}
// 获取产品数据
requestP('products.json').then((products) => {
console.log('Promises/products >>>', products);
// 获取用户数据
return requestP('users.json');
}).then((users) => {
console.log('Promises/users >>>', users);
// 获取评论数据
return requestP('comments.json');
}).then((comments) => {
console.log('Promises/comments >>>', comments);
});
//3. await/async
//async用来表示函数是异步的,定义的函数会返回一个promise对象,可以使用then方法添加回调函数。
//await 后面可以跟任何的JS 表达式,如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。
// 封装 Ajax,返回一个 Promise
function requestP(url) {
return new Promise(function(resolve, reject) {
ajax(url, (response) => {
resolve(JSON.parse(response));
});
});
}
(async () => {
// 获取产品数据
let data = await requestP('products.json');
// 获取用户数据
let users = await requestP('users.json');
// 获取评论数据
let products = await requestP('comments.json');
console.log('ES7 Async/products >>>', products);
console.log('ES7 Async/users >>>', users);
console.log('ES7 Async/comments >>>', comments);
}());