前端如何更好处理后端接口的数据
发布日期:2021-11-14 22:18:54 浏览次数:4 分类:技术文章

本文共 1394 字,大约阅读时间需要 4 分钟。

本文使用到了部分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(

        //     '<li>\
        //         <span>' + title + '</span>' +
        //         '<span>' + date + '</span>' +
        //     '</li>'
        // );

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

        arr.push(

            `
                <li>
                    <span>${ `课程名: ${ title }` }</span>
                    <span>${ foo(date) }</span>
                </li>
            `
        );

    });

    let ul = document.createElement('ul');

    ul.innerHTML = arr.join('');

    document.body.appendChild(ul);

} else {

    alert(msg);
}

下面是HTML文件

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="./main.js"></script>
</body>
</html>

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

转载地址:https://blog.csdn.net/qq_18547381/article/details/104113335 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:ES6函数的扩展——谜题之一(默认值)
下一篇:码云:本地git连接报错=====private email address

发表评论

最新留言

不错!
[***.144.177.141]2024年03月16日 16时00分29秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

取消linux自动登录,linuxdeepin 如何取消自动登录啊? 2019-04-21
linux线程存储,Linux系统编程手册:线程:线程安全和每线程存储 2019-04-21
电脑端的mafsvr服务关掉_网吧才是电脑优化的精髓!学会3招你也不用羡慕网吧的流畅了... 2019-04-21
html获取文件路径_HTML 文件路径 2019-04-21
mysql滴的一声就关了_关于mysql数据库在输入密码后,滴的一声直接退出界面的解决办法(详细办法)... 2019-04-21
mysql in 有序_mysql中的in排序 mysql按in中顺序来排序 2019-04-21
mysql 行转列 显示_mysql 行转列 (结果集以坐标显示) 2019-04-21
由于连接方在一段时间后没有正确答复或连接的主机_新风换气机使用效果不佳,为何?掌握正确使用方法就好了... 2019-04-21
mysql 查询姓王_MySQL查询语句练习题,测试足够用了 2019-04-21
mysql多实例脚本_mysql多实例脚本 2019-04-21
python如何生成excel文件夹_用python脚本通过excel生成文件夹树结构 2019-04-21
python获取post请求中的所有参数_Django从POST reques获取请求参数 2019-04-21
mysql加密复制_MySQL主从复制使用SSL加密 2019-04-21
python启动远端 exe_python打包exe开机自动启动的实例(windows) 2019-04-21
java当前路径_java获取当前路径的几种方法 2019-04-21
java web传递参数_Javaweb的八种传值方式 2019-04-21
java gui支持的包有哪两个_Java GUI 2019-04-21
java list详解_java集合List解析 2019-04-21
java坐标代码_java实现计算地理坐标之间的距离 2019-04-21
kettle调用java程序_Kettle ETL调用 java代码来进行数据库的增删改查 2019-04-21