web面试（十一）ES6

async await

ES6 async 函数

ES6 Promise 和 Async/await的使用

总结javascript处理异步的方法

实战

this.$requestApi.getgcdetail调用接口返回promise，response是resolve出来的数据，也就是接口返回数据

// ./api/index
class requestApi {
    baseUrl: String;
    constructor() {
        if (env) {
            this.baseUrl = 'https://campaign.test.gifshow.com';
        } else {
            this.baseUrl = 'https://campaign.kstv.com';
        }
    }
    // 获取优惠券详情
    getgcdetail(couponId: string) {
        return new Promise(function (resolve, reject) {
            ajax.get('/sf/carnival/activity/rest/gk/coupons/getgcdetail', {
                couponId: couponId
            }, function (res: any) {
                resolve(res);
            }, function (res: any) {
                reject(res);
            }, function (res: any) {
                reject(res);
            });
        });
    }
}

export {
    requestApi
};


// index.ts
import { Vue, Component } from 'vue-property-decorator';
import App from './App.vue';
import { requestApi } from './api/index';
Vue.prototype.$requestApi = new requestApi();
new Vue({
    el: '#app',
    render: h => h(App),
});


// App.vue
async getgcdetail() {
        gcSendLogInit({
            page2: 'H5_COUPON_T912093_DETAIL_ACTIVE',
            disableShowEvent: false,
        });
        const response = await this.$requestApi.getgcdetail(getUrlParam('couponId'));
        if (response.result == 1) {
            this.couponDetail = response.couponDetail;
            let coupon_status;
            if (this.couponDetail.status == 1) {
                coupon_status = 'step_dotask';
            } else if (this.couponDetail.status == 2) {
                coupon_status = 'step_drawn';
            } else if (this.couponDetail.status == 3) {
                coupon_status = 'step_nostart';
            } else if (this.couponDetail.status == 4) {
                coupon_status = 'step_useing';
            } else if (this.couponDetail.status == 5) {
                coupon_status = 'step_used';
                yoda.game.couponUsed({
                    couponId: getUrlParam('couponId'),
                });
            } else if (this.couponDetail.status == 6) {
                coupon_status = 'step_outdate';
            }
        }
    }

另外一种写法，this.service.getlist调用接口返回promise，使用then接收

// ../service/coupons

class main {
    constructor(...params) {
        this.gcRequestObject = new gcRequest(...params);
    }
    // 获取优惠券列表
    async getlist(params) {
        const that = this;
        return new Promise(function (resolve, reject) {
            that.gcRequestObject.get(kshost, '/game/coupons', params, function (data) {
                resolve(data);
            }, function (data) {
                resolve(data);
            }, function (err) {
                reject(err);
            });
        });
    }
}

module.exports = main;

// ../controller/coupons
const service = require('../service/coupons');
const { superClass } = require('../util/super');
class main extends superClass {
    // 构造函数
    constructor(...params) {
        super(...params);
        this.service = new service(...params);
    }
    // 查询游戏内优惠券列表
    async getlist() {
        const result = {
            data: '',
            code: 200,
        };
        const params = this.queryParams;
        await this.service.getlist(params)
            .then(async data => {
                result.data = data;
                result.code = 200;
            })
            .catch(async err => {
                result.data = err;
                result.code = 504;
            });
        return result;
    }
}

module.exports = main;

class

https://www.runoob.com/w3cnote/es6-class.html

http://caibaojian.com/es6/class.html

帮助理解

基础：

class Example {
    // 默认方法（构造函数），创建类的实例对象时被调用
    constructor(m,n) { 
        this.m = m
        this.n = n
        console.log('我是默认方法')
    }
    // 静态方法，只能被类本身调用
    static sum(i,j) {
        console.log("i + j:" + (i + j))
    }
    // 原型/实例方法，只能被类的实例对象调用
    dum (a,b) {
        console.log(Example.str); // 通过Example. 调用静态属性
        console.log("a + b:" + (a + b))
        console.log("m + n:" + (this.m + this.n))
    }
    
    // 静态属性，只能被类本身调用
    static str = "我是静态属性"
    // 原型/实例属性，只能被类的实例对象调用
    proStr = "我是实例属性"
}
// 公共属性
Example.prototype.public = "我是公共属性"

// 方法调用
Example.sum(1,2)

var example = new Example();
example.dum(2,3)

var example2 = new Example(4,6);
example2.dum()

// 属性调用
console.log(Example.str)

console.log(example2.proStr)

console.log(Example.prototype.public)

console.log(example2.public) 

继承：

// super 作为函数：
// 该类通过extends关键字，继承了Father类的所有属性和方法，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承
// 子类必须在constructor方法中调用super方法，它在这里表示父类的构造函数（constructor），用来新建父类的this对象，
// 且必须出现在 this 之前，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，
// 然后对其进行加工。如果不调用super方法，子类就得不到this对象。
// super()只能用在子类的构造函数之中，用在其他地方就会报错。
// super()在执行时super()内部的this指向的是B
// super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法。

// super 作为对象：
// 指向父类的原型对象，所以定义在父类实例（constructor）上的方法或属性，是无法通过super调用的。
// 调用父类方法, super 作为对象，在普通方法中，指向父类的原型对象，在静态方法中，指向父类

class Father {
    constructor(x,y) {
        console.log("我是父类默认方法");
        this.x = x;
        this.y = y;
    }
    sum() {
        return 0;
    }
    static num() {
        return 1;
    }
}

class Child extends Father {
    constructor(x,y,color) {

        console.log("我是子类默认方法");

        super(x,y); // 调用父类的constructor(x, y)

        // 调用父类普通方法
        console.log(super.sum()); // 0
        console.log(this.sum()); // 0

        this.color = color;
    }
    toString() {
        console.log(super.x); // undefined
        console.log(this.x); // 10 获取父类属性
        
        console.log(this.color + ' ' + super.sum()); // 3 0 调用父类普通方法
        console.log(this.color + ' ' + this.sum()); // 3 0 调用父类普通方法
    }
    static a() {
        // 调用父类静态方法
        console.log(super.num() + 1); // 2
        console.log(this.num() + 1); // 2
    }
}
const child = new Child(1,2,3); // 我是父类默认方法  我是子类默认方法2

Child.a(); // 2

child.toString();

// 继承类的方法重写
class PrinterClass { 
    doPrint() {
       console.log("父类的 doPrint() 方法。") 
    } 
} 
  
class StringPrinter extends PrinterClass { 
    doPrint() { 
       super.doPrint() // 调用父类的函数
       console.log("子类的 doPrint()方法。")
    } 
}
const stringPrinter = new StringPrinter();
stringPrinter.doPrint(); // 父类的 doPrint() 方法。 子类的 doPrint()方法。

实战

简单类型，在js中使用

// ./api/index
class requestApi {
    baseUrl: String;
    constructor() {
        if (env) {
            this.baseUrl = 'https://campaign.test.gifshow.com';
        } else {
            this.baseUrl = 'https://campaign.kstv.com';
        }
    }

    // 获取任务类型奖励
    getGameGiftList(gameId: string) {
        const _this = this;
        return new Promise(function (resolve, reject) {
            ajax.send('/sf/carnival/activity/rest/gk/gc_gift/getGameGiftList', {}, {
                gameId: gameId,
                type: 4
            }, function (res: any) {
                resolve(res);
            }, function (res: any) {
                reject(res);
            }, false);
        });
    }
}

export {
    requestApi
};


// index.ts
import { Vue, Component } from 'vue-property-decorator';
import App from './App.vue';
import { requestApi } from './api/index';
Vue.prototype.$requestApi = new requestApi();
new Vue({
    el: '#app',
    render: h => h(App),
});


//App.vue
async initList() {
        const gameId = getUrlKey('gameId');
        const response = await this.$requestApi.getGameGiftList(gameId);
        if (response.result == 1) {
            this.giftList = response.giftList;
            this.unAcquireCount = response.unAcquireCount;
            this.gameName = response.gameName.length > 6 ? response.gameName.substring(0, 6) + '..' : response.gameName;
            this.gameIcon = response.gameIcon;
            if (response.gameName) {
                ksBridge.setPageTitle({
                    title: `${response.gameName}福利礼包`,
                });
            }
        }
    }

继承类型，在node中使用

// ../util/super
class superClass {
    constructor(...params) {
        this.queryParams = params[0];
        this.bodyParams = params[1];
        this.cookie = params[2];
        this.captchaToken = params[3];
        this.customHeader = params[4];
    }
}
module.exports = {
    superClass,
};


// ../service/coupons
class main {
    constructor(...params) {
        this.gcRequestObject = new gcRequest(...params);
    }
    // 获取优惠券列表
    async getlist(params) {
        const that = this;
        return new Promise(function (resolve, reject) {
            that.gcRequestObject.get(kshost, '/game/coupons', params, function (data) {
                resolve(data);
            }, function (data) {
                resolve(data);
            }, function (err) {
                reject(err);
            });
        });
    }
}

module.exports = main;


// controller/coupons.js
const service = require('../service/coupons');
const { superClass } = require('../util/super');
class main extends superClass {
    // 构造函数
    constructor(...params) {
        super(...params);
        this.service = new service(...params);
    }
    // 查询游戏内优惠券列表
    async getlist() {
        const result = {
            data: '',
            code: 200,
        };
        const params = this.queryParams;
        await this.service.getlist(params)
            .then(async data => {
                result.data = data;
                result.code = 200;
            })
            .catch(async err => {
                result.data = err;
                result.code = 504;
            });
        return result;
    }
}

module.exports = main;


// aggregateInterface.js
const controller = require(`../controller/${routepath}`);
const data = await new controller(queryParams, bodyParams, cookie, captchaToken, customHeader)[tagetINterface]();
data.data.timeStamp = new Date().getTime();

 

 

 

 

 

 

 5、es6常用的一些命令，方法，api 。
(例如 let、const、import、export、箭头函数、promise对象、async函数，class,解构赋值 推荐学习地址：http://es6.ruanyifeng.com/) 

https://github.com/lgwebdream/FE-Interview/issues/29 

https://www.cnblogs.com/lvdabao/p/es6-promise-1.html

https://juejin.cn/post/6844903576309858318

https://juejin.cn/post/6844904116339261447#heading-3