初学者跪着学JavaScript Day27 : 渣男给不完的promise

一日客语：中文：凤梨客语：vong(三声)李（黄梨）

介绍promise

简化非同步程序设计的一项语言

mdn:
new Promise ( /* executor */ function(resolve, reject) { ... } );

Promise 是建构子需要大写，和new 创建出一个物件
callback function （第一个参数：resolve、第二个参数：reject ）
resolve、reject 参数是各自的 function
新创建的物件会是非同步计算结果，里面会有 [[PromiseState]] 表示目前状态

const promise = new Promise((resolve, reject) => {});

//也可以自行定义
const promise = new Promise((sucessful, fail) => {});

此时PromiseState : ”pending"

物件刚建立会先处在 pending 状态

promise 物件会有三种状态:

pending：未取得结果
fulfilled:成功完成
rejected:失败

未使用resolve、rejected

他的 [[promiseState]] 会是 pending

const myPromise = new Promise((resolve, reject) => {
    console.log('执行了喔');
    // resolve('pmyPromise状态改成rejected');
});

使用resolve

promise 被完成，会呼叫 resolve

当有执行 resolve function 他的状态会变成"fulfilled"

const myPromise = new Promise((resolve, reject) => {
    console.log('执行了喔');
    resolve('pmyPromise状态改成fulfilled');
});

看看浏览器显示：

如下图

使用reject

当有执行 reject function 他的状态会变成 "rejected"

const myPromise = new Promise((resolve, reject) => {
    console.log('执行了喔');
    reject('pmyPromise状态改成rejected');
});

看看浏览器显示：

如下图

或者中途错误

const promise = new Promise((resolve, reject) => {
    throw '糟糕要失败了';
    console.log('开始');
});
promise.then(
    //resolve
    (resolve) => console.log(resolve + '耶成功'),
    //reject
    (reject) => console.log(reject + 'QQ被拒绝')
);//糟糕要失败了QQ被拒绝

then语法

Promise具有then()方法，promise.then()

mdn:p.then(onFulfilled[, onRejected]);

then() 方法回传一个 Promise 物件。

接收两个引数： Promise 在成功及失败情况时的回呼函式callback function。

第一个callback function，由resolve值传入

第二个callback function，由reject值传入

const promise = new Promise((resolve, reject) => {
    resolve('我是resolve');
});
promise.then(
    //resolve
    (resolve) => console.log(resolve + '耶成功'),
    //reject
    (reject) => console.log(reject + 'QQ被拒绝')
);
//我是resolve耶成功

const promise = new Promise((resolve, reject) => {
    reject('我是reject');
});
promise.then(
    //resolve
    (resolve) => console.log(resolve + '耶成功'),
    //reject
    (reject) => console.log(reject + 'QQ被拒绝')
);
//我是rejectQQ被拒绝

可以用另一种写法:then()和catch()

const promise = new Promise((resolve, reject) => {
    reject('我是reject');
});
promise
    .then(
        //resolve
        (resolve) => console.log(resolve + '耶成功')
    )
    .catch(
        //reject
        (reject) => console.log(reject + 'QQ被拒绝')
    );

可以透过then把resolve/reject的值传递

let myPromise = new Promise((resolve, reject) => {
    resolve('我是resolve');
});
myPromise.then((result) => console.log('你是谁', result));
//你是谁 我是resolve

执行顺序:发现 then 是最後才被印出

function funcA() {
    return new Promise(function (reslove, reject) {
        console.log('nini:你在哪里');
        setTimeout(() => {
            reslove('渣男:我在家里啊');
        }, 1000);
    });
}
funcA().then(function (x) {
    console.log(x);
});

console.log('这里是外面');
console.log('这里是外面');
console.log('这里是外面');
console.log('这里是外面');
//nini:你在哪里
//这里是外面
//这里是外面
//这里是外面
//这里是外面
//渣男:我在家里啊

因为funcA().then(function (x) { console.log(x); });
这个仍是非同步

求婚剧情

男主角给女主角一个promise，表示要求婚了，会有两种状况

1.结婚，表示求婚成功

2.不结，表示求婚失败

当随机数字是1，女主答覆嫁，非1，女主角不嫁

利用then()来看女方答覆，加上吃瓜民众结论

yes：女主角答覆+'女主角说愿意，求婚成功'

no: 女主角答覆+'女主角说不愿意，求婚失败'

呈现结果会是

1.不嫁女主角说不愿意，求婚失败

2.嫁女主角说愿意，求婚成功

function woman() {
    let randomNumber = Math.random() * 3;
    let random = Math.floor(randomNumber);
    return new Promise(function (resolve, reject) {
        if (random === 1) {
            return resolve('嫁');
        } else {
            return reject('不嫁');
        }
    });
}
woman()
    .then((yes) => console.log(yes, '女主角说愿意，求婚成功'))
    .catch((no) => console.log(no, '女主角说不愿意，求婚失败'));

chaining Promises

可以利用 chaining Promises做出有顺序的非同步执行

fetch(url).then(1).then(2).catch()

最後一个catch()处理发生任何错误

每一个then()方法都会回传一个新物件

let person = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('要不要和我再一起');
    }, 1000);
});
person.then((result) => {
//传给then 一个promise且回传一个新值
    console.log(result);
    return '愿意';
});
//要不要和我再一起

当return '愿意'

他的[[PromiseResult]]: "愿意"

当没有return

他的[[PromiseResult]]: "undefined"

第一个then的return可以传给下一个then

let person = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('要不要跟我在一起啊nini');
    }, 3 * 100);
});

person
    .then((result) => {
        console.log(result);
        return 'niki';
    })
    .then((result) => {
        console.log(`${result}要不要跟我在一起啊`);
        return 'kiki';
    })
    .then((result) => {
        console.log(`${result}要不要跟我在一起啊`);
        return 'mimi';
    });
//要不要跟我在一起啊nini
//niki要不要跟我在一起啊
//kiki要不要跟我在一起啊

then回传promise

讲述渣男故事1：

不同人打给渣男例子

function funcA() {
    return new Promise(function (reslove, reject) {
        console.log('nini:你在哪里');
        setTimeout(() => {
            reslove('渣男:我在家里啊');
        }, 1000);
    });
}
function funcB() {
    return new Promise(function (reslove, reject) {
        console.log('niki:你在哪里啊');
        setTimeout(() => {
            reslove('渣男:我在公司啊');
        }, 1000);
    });
}
function funcC() {
    return new Promise(function (reslove, reject) {
        console.log('kiki:你在哪里啊');
        setTimeout(() => {
            reslove('渣男:我找朋友');
        }, 1000);
        return '没有人发现我在外面';
    });
}
funcA()
    .then(function (x) {
        console.log(x);
        return funcB();
    })
    .then(function (y) {
        console.log(y);
        return funcC();
    })
    .then(function (z) {
        console.log(z);
    });

console.log('*********这里是酒吧*************');
//nini:你在哪里
//*********这里是酒吧*************
//渣男:我在家里啊
//niki:你在哪里啊
//渣男:我在公司啊
//kiki:你在哪里啊
//渣男:我找朋友

讲述渣男故事2：

男主角有三位女朋友

理想结婚人选 1.nini 2.niki 3.kiki

nini 小姐求婚，
求婚成功：结婚
求婚失败：和下一位niki小姐求婚

niki 小姐求婚
求婚成功：结婚
求婚失败：和下一位kiki小姐求婚

kiki 小姐求婚
求婚成功：结婚
求婚失败：没人愿意和他结婚。帮他QQ

套路是同招数一直使用

function marry(name) {
    let randomNumber = Math.random() * 3;
    let random = Math.floor(randomNumber);
    return new Promise(function (resolve, reject) {
        if (random === 1) {
            reject(` ${name} :说愿意`);
        } else {
            resolve(` ${name} :说不愿意`);
        }
    });
}
marry('nini')
    .then((fail) => {
        console.log(`求婚结果1${fail}`);
        return marry('niki');
    }) 
    .then((fail) => {
        console.log(`求婚结果2${fail}`);
        return marry('kiki');
    })
    .then((fail) => {
        console.log(`求婚结果3${fail}`);
        return '没人要跟我结婚';
    })
    .catch((success) => {
        console.log(`求婚成功` + success);
        return '终於有对象';
    });

大概会是这样的结果