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']);
            }
        }); 

    }

    //POST方法(JSON)
    post_url(){

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

    }

}

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

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