资讯专栏INFORMATION COLUMN

使用Easy Mock模拟数据,ajax请求数据小例子

Corwien / 2821人阅读

摘要:学习小问题和小理解解决异步处理的问题实际应用中有很多问题消耗时间,比如传输,数据库处理,文件的读写消耗时间等,通过回调,当成功返回时执行,可以减少页面更新时间。

最近学习了一下用Easy Mock模拟数据,然后通过ajax请求数据返回显示到页面上,完成一个请求数据和显示的过程,下面通过一个获取用户信息例子来说明一下:

1. 使用Easy Mock模拟数据

在Easy Mock上新建一个项目,项目基础url为ajaxData,打开项目,创建接口

将获取方式为get,接口的url设为getUserInfo

添加用户信息数据:用户头像 avator,姓名 nickname,性别 sex

2. 请求获取数据,更新页面

ajax主动向后端请求,使用jQuery中的getJSON()函数,从服务器加载json编码的数据,更新dom

3. 学习函数式编程的一些想法

数据通信和渲染页面是两件事,我们要将它们放开来做,将之前更新dom的代码封装成一个renderUserInfo()函数,只需要传一个参数data就可以实现渲染页面

如何实现数据通信?
通过异步回调函数,先请求这个链接,请求传输数据需要时间,此时会先执行下面的getUserInfo(renderUserInfo)渲染页面,当获取数据成功是返回执行callback(data),完成更新页面。

学习小问题和小理解:
js解决异步处理的问题实际应用?
js中有很多问题消耗时间,比如传输ajax,数据库处理,文件的读写消耗时间等,通过callback回调,当成功返回时执行,可以减少页面更新时间。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89815.html

相关文章

  • 前端开发如何做好本地接口模拟

    摘要:前端开发如何做好本地接口模拟之前有写过一篇本地化接口模拟前后端并行开发,讲到过本地接口模拟,但不太细致。有哪些途径本地接口模拟一般分为工具层面和代码层面。因为本地接口模拟功能主要是针对的返回值为格式的异步请求,所以这种方式主要用文件。 前端开发如何做好本地接口模拟 之前有写过一篇 本地化接口模拟、前后端并行开发,讲到过本地接口模拟,但不太细致。这次细细的说说本地接口模拟。 1. 有什么...

    ACb0y 评论0 收藏0
  • 后续请求都要带上 token ?

    摘要:正经写文章平时开发里,先请求一个,然后后面的请求都要带上这个来进行认证或者授权,是一个常见的需求那要怎么搞呢还是一个先后,控制异步流程的的问题,就是先拿到再进行后面的请求就好了。 正经写文章 平时开发里,先请求一个 token ,然后后面的请求都要带上这个 token 来进行认证或者授权,是一个常见的需求 那要怎么搞呢?还是一个先后,控制异步流程的的问题,就是先拿到 token 再进行...

    genedna 评论0 收藏0
  • Easy Mock 模拟伪造服务器数据进行开发调试

    摘要:以前开发的时候需要数据调试要么当前文件代码写死要么新建文件来获取偶然知道了这个神奇的网站可能有点后知后觉伪造起数据别提多爽了初次见面打开官网界面甚至简单我喜欢的自我介绍开启探索之旅看过介绍下面就开始登录使用了强势登录如果之前没有账号会直接注 以前开发的时候需要数据调试要么当前文件代码写死, 要么新建 JSON 文件来获取. 偶然知道了 Easy Mock 这个神奇的网站(可能有点后知后...

    leap_frog 评论0 收藏0
  • 浅谈前端mock

    摘要:引言前端开发经常需要等待后端的接口,严重影响了开发效率,我们一般采用方式来避免这个问题。可能会涉及到门技术,分别是服务端技术随机生成特定格式数据的技术请求转发请求拦截。 引言 前端开发经常需要等待后端的接口,严重影响了开发效率,我们一般采用mock方式来避免这个问题。本人参考了大量文章,结合自己的经验,给出自己在mock上的一些理解。 1. 原理 何为mock,我认为mock主要就是通...

    elina 评论0 收藏0

发表评论

0条评论

Corwien

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<