前端如何更好处理后端接口的数据-白红宇的个人博客

发布日期：2021-11-14 22:18:54 浏览次数：8 分类：技术文章

本文共 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

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！