天天看点

Promise应用场景

场景举例:分类信息展示

(1)需求:表单中用户姓名与职业的分类信息展示

  1、初步模板如下

    

Promise应用场景

     

Promise应用场景

  2、需求:做一个用户编辑操作,但这里注意职业是从服务端动态差进来的

Promise应用场景

     所以这里需要两张表,即用户表+职业表

Promise应用场景

    例如,信息存储时职业对应数字为4,则该人员职业为职业信息表中ID为4的职业

Promise应用场景

     如果为job为2,则对应职业信息表里ID为2的职业

  3、接下来设计下接口文档

    同级新建文件data.json用于模拟存储数据,为了解决数据冗余问题,用户信息处的职业保存的时职业表里对应的id

Promise应用场景

    接下来需要查询两个数据接口,获取用户信息和职业,接下来开一个接口,详见文章json-server模拟服务器API .

    再新增几条数据

    例如想获取id为2的用户信息,接口路径如下

Promise应用场景

    将之前封装的ajax方法调用过来,然后进行调用,如下所示

Promise应用场景

     接下来刷新页面,做下测试

Promise应用场景

     此时页面控制台根据接口输出id为2的学生信息,因为默认格式为字符串,需要进行解析成js对象

Promise应用场景
Promise应用场景

  4、模板引擎

    接下来需要将对象内容结合模板引擎art-template(前端客户端模板引擎)渲染到页面,首先下载到当前项目,然后引入

Promise应用场景
Promise应用场景

    编写渲染模板,将form表单内容编写至模板里

Promise应用场景

     然后编写渲染语法

Promise应用场景

     模板变量

Promise应用场景

     然后进行渲染

Promise应用场景

     此时刷新页面,结果如下(id为2的员工信息)

Promise应用场景

(2)职业数据

  接下来操作职业数据

  

Promise应用场景
Promise应用场景
Promise应用场景

   然后需要判断当前人员职业,将该职业设为默认选中状态

Promise应用场景

  此时便完成了接口调用渲染

Promise应用场景

  总结代码如下

(3)jQuery的ajax调用Promise的API

  1、首先下载引入jquery

Promise应用场景
Promise应用场景

   2、对比

Promise应用场景
Promise应用场景
Promise应用场景
Promise应用场景

     接下来编写模板即可

Promise应用场景

 3、完整代码如下

此时便成了链式调用

.