前端如何更好处理后端接口的数据
发布日期: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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
不错!
[***.144.177.141]2024年03月16日 16时00分29秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
取消linux自动登录,linuxdeepin 如何取消自动登录啊?
2019-04-21
linux线程存储,Linux系统编程手册:线程:线程安全和每线程存储
2019-04-21
html获取文件路径_HTML 文件路径
2019-04-21
mysql in 有序_mysql中的in排序 mysql按in中顺序来排序
2019-04-21
mysql 行转列 显示_mysql 行转列 (结果集以坐标显示)
2019-04-21
mysql 查询姓王_MySQL查询语句练习题,测试足够用了
2019-04-21
mysql多实例脚本_mysql多实例脚本
2019-04-21
python如何生成excel文件夹_用python脚本通过excel生成文件夹树结构
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