//使用ajax分别获取用户名、第一个用户的用户名、第一个用户的repo
//结果发现返回顺序不确定
<script type="text/javascript">
let user;
$.get('http://api.github.com/users',data => {
console.log('fetch all users');
user = data[0].login;
});
$.get('http://api.github.com/users/${user}/repos',data => {
console.log('fetch user repos');
console.log(data);
})
</script>
//嵌套写法，将第二个请求写在第一个回调函数里
//但是当嵌套层很多时，依赖很多，回调地狱
<script type="text/javascript">
let user;
$.get('https://api.github.com/users',data => {
console.log('fetch all users');
user = data[0].login;
$.get('https://api.github.com/users/${user}/repos',data => {
console.log('fetch user repos');
console.log(data);
});
});
</script>
//promise解决了不确定性和回调地狱
//.then()相当于一种监听，当事件成功之后再执行
<script type="text/javascript">
let username;
const userPromise = axios.get('https://api.github.com/users');
userPromise
.then(response => {
username = response.data[0].login;
return axios.get('https://api.github.com/users/${username}/repos');
})
.then(response => {
console.log(response.data);
})
.catch(err => {
console.error(err); //返回错误信息
})
</script>
<script type="text/javascript">
const repos = [
{
name: 'grit',
owner: 'mojobo',
description: 'Girt is no longer maintained',
id: 1
},
{
name: 'jsawesome',
owner: 'vanpelt',
description: 'Awesome JSON',
id: 2
},
{
name: 'merb-core',
owner: 'wycats',
description: 'Merb Core:All you need.None you don\'t.',
id: 3
}
];
const owners = [
{
name: 'mojobo',
location: 'san Francisco',
followers: 123
},
{
name: 'vanpelt',
location: 'Bay Minette',
followers: 1034
},
{
name: 'wycats',
location: 'Los Angeles,CA',
followers: 388
}
];
function getRopoById (id) {
return new Promise((resolve,reject) => {
const repo = repos.find(repo => repo.id === id);
if(repo) {
resolve(repo)
}else {
reject(Error('No repo found'));
}
})
}
function comboundOwner(repo) {
return new Promise((resolve,reject) => {
const owner = owners.find(owner => owner.name === repo.owner);
if(owner) {
repo.owner = owner;
resolve(repo)
}else {
reject(Error('Can not found the owner'));
}
})
}
getRopoById(1)
.then(repo => {
return comboundOwner(repo);
})
.then(repo => {
console.log(repo); //{name: "grit", owner: {…}, description: "Girt is no longer maintained", id: 1}
})
.catch(err => {
console.error(err)
})
</script>
- 处理多个
Promise实例 — Promise.all()
//Promise.all方法接受一个数组作为参数
<script type="text/javascript">
const userPromise = new Promise((resolve,reject) => {
resolve(['mojombo','vanpelt','wycats']);
});
const moviePromise = new Promise((resolve,reject) => {
resolve({name: '摔跤吧！爸爸！',rating: 9.2,year: 2016});
});
Promise
.all([userPromise,moviePromise])
.then(response => {
const [users,movie] = response;
console.log(users); //["mojombo", "vanpelt", "wycats"]
console.log(movie); //{name: "摔跤吧！爸爸！", rating: 9.2, year: 2016}
})
.catch(err => {
console.error(err);
})
</script>
//只有数组项中的每一个实例都resolve时，才会继续执行Promise.all的then方法；否则执行catch
<script type="text/javascript">
const userPromise = new Promise((resolve,reject) => {
setTimeout(() => {
resolve(['mojombo','vanpelt','wycats']);
},2000);
});
const moviePromise = new Promise((resolve,reject) => {
setTimeout(() => {
//resolve({name: '摔跤吧！爸爸！',rating: 9.2,year: 2016});
reject('No movie');
},500);
});
Promise
.all([userPromise,moviePromise])
.then(response => {
console.log(response); //No movie
})
.catch(err => {
console.error(err);
})
</script>
- 处理多个
Promise实例 — Promise.race
//参数同Promise.all()
//只要参数项中某一个实例率先改变状态，Promise的状态就会跟着改变
//这个例子中moviePromise的状态第一个改变，因此response返回movie值
<script type="text/javascript">
const userPromise = new Promise((resolve,reject) => {
setTimeout(() => {
//resolve(['mojombo','vanpelt','wycats']);
reject('No user');
},2000);
});
const moviePromise = new Promise((resolve,reject) => {
setTimeout(() => {
resolve({name: '摔跤吧！爸爸！',rating: 9.2,year: 2016});
},500);
});
Promise
.race([userPromise,moviePromise])
.then(response => {
console.log(response); //{name: "摔跤吧！爸爸！", rating: 9.2, year: 2016}
})
.catch(err => {
console.error(err);
})
</script>
