前端如何更好处理后端接口的数据

本文使用到了部分ES6的知识

假设接口如下

const getImoocCourseList = function() {
    // ajax
    return {
        status: true,
        msg: '获取成功',
        data: [{
            id: 1,
            title: 'Vue 入门',
            date: 'xxxx-01-09'
        }, {
            id: 2,
            title: 'ES6 入门',
            date: 'xxxx-01-10'
        }, {
            id: 3,
            title: 'React入门',
            date: 'xxxx-01-11'
        }]
    }
};

 1.首先通过ES6中的解构赋值从中提取数据，使用的ES6的好处在于ES6对象的解构赋值是不需要按顺序对应的，变量必须与属性同名，就能取到正确的值。

const { data: listData, status, msg } = getImoocCourseList();

 为此引用下阮一峰大神的ES6入门中的介绍

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。 

 

2.通过push方法插入数据进行展示，使用ES6模板字符串能够不再使用字符串连接的形式，有效避免使用连接时出现的问题。在

function foo(val) {
    return val.replace('xxxx', 'xoxo');
}

if (status) {
    let arr = [];

    listData.forEach(function({ date, title }) {

        // arr.push(
        //     '

\
        //         ' + title + '' +
        //         '' + date + '' +
        //     '

'
        // );

//注意push方法中出入代码端的方式用到了ES6中的模板字符串

        arr.push(
            `
                

                    ${ `课程名: ${ title }` }
                    ${ foo(date) }
                

            `
        );

    });

    let ul = document.createElement('ul');
    ul.innerHTML = arr.join('');

    document.body.appendChild(ul);

} else {
    alert(msg);
}

下面是HTML文件

    
    


    

个人在学习ES6，如果有什么需要订正的地方欢迎大家留言。祝大家新年快乐，工作顺利。