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

最新推荐文章于 2023-07-23 14:00:00 发布

MyKyle18

最新推荐文章于 2023-07-23 14:00:00 发布

阅读量2.3k

点赞数 1

文章标签：前端后端接口接口数据

本文链接：https://blog.csdn.net/qq_18547381/article/details/104113335

版权

本文使用到了部分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，如果有什么需要订正的地方欢迎大家留言。祝大家新年快乐，工作顺利。

MyKyle18

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端如何更好处理后端接口的数据

本文使用到了部分ES6的知识假设接口如下const getImoocCourseList = function() { // ajax return { status: true, msg: '获取成功', data: [{ id: 1, title: 'Vue 入门',...
复制链接

扫一扫