ECS6语法,在JavaScript中通过面向对象编程,优雅地使用Ajax

2020-12-26 22:13:17   Cyberbolt

本文记录面向对象编程中,如何在js中优雅地使用Ajax(Ajax成功响应后,可直接调用类属性)

环境:已经引入jQuery库

先上源码

class Test{
    constructor(){
        this.data = '测试数据为:';
    }

    //GET方法
    get_url(){

        $.ajax({
            url: "/api/test",
            type: "GET",
            dataType: "json",
            success: (data) => {
                //请求成功后访问类属性,并显示服务端返回数据
                console.log('测试数据为' + data['content']);
            }
        });

    }

    //POST方法
    post_url(){

        $.ajax({
            url: "/api/test",
            data: {
                'name' : 'jenny',
                'sex' : 'fm'
            }, //请求的表单
            type: "POST",
            dataType: "json",
            success: (data) => {
                //请求成功后访问类属性,并显示服务端返回数据
                console.log('测试数据为' + data['content']);
            }
        }); 

    }
}

这里在ajax success后,这里没有使用闭包,而是通过剪头函数执行后续操作,使用箭头函数可轻松访问上层对象中的属性。

对比闭包,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj。