es6-Promise

Promise 承诺

then方法和catch方法

• then
  成功以后执行的函数
• catch
  失败执行的函数

axios请求就是一个Promise

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

let userPromise = axios.get('https://api.github.com/users');
    userPromise.then(response => {
        console.log(response, '111')
        let username = response.data[0].login;
        return axios.get(`https://api.github.com/users`)
    }).then(response => {
        console.log(response, '222')
})

自定义Promise

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve('Fighting')
        reject('error');
    }, 2000)
})
    
p.then(data => {
console.log(data)
}).catch(data => {
console.log('error')
})

简单的使用例子

const users = [
    { id: 1, name: 'Jone', age: 10, class_id: 1 },
    { id: 3, name: 'Tom', age: 11, class_id: 2 },
    { id: 5, name: 'Mike', age: 12, class_id: 1 }
]

const classes = [
    { id: 1, name: 'class-1' },
    { id: 2, name: 'class-2' },
    { id: 3, name: 'class-3' },
]

function getUser(id) {
    return new Promise((resolve, reject) => {
        const user = users.find(user => user.id == id);
        if (user) {
            resolve(user);
        } else {
            reject('Can not find user.');
        }
    })
}

function getClass(user) {
    return new Promise((resolve, reject) => {
        const cls = classes.find(cls => cls.id == user.class_id);
        if(cls){
            resolve(cls);
        }else{
            reject('Can not find class.');
        }
    })
}

getUser(1).then(user => {
    return getClass(user).then();
}).then(cls =>{
    console.log(cls);
}).catch(err => {
    console.log(err);
})

多重Promise

const userPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('root');
    }, 2000);
})

const infoPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('root info.');
    }, 1000);
});

// Promise.all 只有所有的Promise为resolve才执行then里面的内容
Promise.all([userPromise, infoPromise]).then(responses => {
    console.log(responses)
})

// Promise.race 获取第一个Promise的结果