前后端分离开发,前端通过接口获取数据,但是有的页面不止一个接口,就会出现金字塔回调,可以通过 Promise 封装请求。

request-data.js:

  1. function reqData(posturl, req, res, callback) {//请求用户数据
  2. request({
  3. url: con.url + posturl,
  4. method: "POST",
  5. json: true,
  6. headers: {
  7.  
  8. }
  9. }, function (error, response, body) {
  10. if (!error && response.statusCode == 200) {
  11. callback(body.code, body.data, null);
  12. } else {
  13. callback(null, null, "error");
  14. }
  15. });
  16. }
  17.  
  18. function reqPostData(posturl, bodyData, req, res, callback) {//请求用户数据
  19. request({
  20. url: con.url + posturl,
  21. method: "POST",
  22. json: true,
  23. headers: {
  24.  
  25. },
  26. body: bodyData
  27. }, function (error, response, body) {
  28. if (!error && response.statusCode == 200) {
  29. callback(body.code, body.data, null);
  30. } else {
  31. callback(null, null, "error");
  32. }
  33. });
  34. }

viewData.js:

  1. //引入数据请求模块
  2. var requestData = require('./request-data');
  3.  
  4. function getNoParam(postUrl,req, res,describe) {
  5. var describe = describe || '数据';
  6. //创建Promise对象
  7. var p = new Promise(function(resolve, reject){
  8. //发送获取相应数据的请求
  9. requestData.reqData(postUrl, req, res, function (code, data, err) {
  10. if (code == 0) {
  11. //成功返回数据
  12. resolve({Data:data});
  13. } else {
  14. //失败说明原因
  15. reject(describe + "获取失败:" + data);
  16. }
  17. });
  18. });
  19. return p;
  20.  
  21. }
  22.  
  23. function getWithParam(postUrl, postData,req, res,describe){
  24. var describe = describe || '数据';
  25. //创建Promise对象
  26. var p = new Promise(function(resolve, reject){
  27. //发送获取相应数据的请求
  28. requestData.reqPostData(postUrl, postData, req, res, function (code, data, err) {
  29. // console.log(code, data, err);
  30. if (code == 0) {
  31. //成功返回数据
  32. resolve({Data:data});
  33. } else {
  34. //失败说明原因
  35. reject(describe + "获取失败:" + data);
  36. }
  37. });
  38. });
  39. return p;
  40. }

路由文件调用:

  1. var viewData = require('../modules/viewData');
  2.  
  3. /*商品列表*/
  4. router.get('/list', function (req, res) {
  5. Promise
  6. .all([viewData.getNoParam('/user/hot_list', req, res, '热门列表'), viewData.getWithParam('/user/recommend_list', {id: req.query.id}, req, res, '推荐列表')])
  7. .then(
  8. function (results) {
  9. res.render('index/pay_complet', {
  10. title: '商品列表',
  11. hot: results[0].Data,
  12. rm: results[1].Data
  13. });
  14. },
  15. function (reason) {
  16. //console.log(reason);
  17. res.render('common/error', {title: '错误', message: reason});
  18. }
  19. );
  20. });

Promise(避免金字塔回调)的更多相关文章

  1. ES6(promise)_解决回调地狱初体验

    一.前言 通过这个例子对promise解决回调地狱问题有一个初步理解. 二.主要内容 1.回调地狱:如下图所示,一个回调函数里面嵌套一个回调函数,这样的代码可读性较低也比较恶心 2.下面用一个简单的例 ...

  2. jquery.Deferred promise解决异步回调

    我们先来看一下编写AJAX编码经常遇到的几个问题: 1.由于AJAX是异步的,所有依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套,ajax等异步操作越多,嵌套层次就会越 ...

  3. 【JavaScript】 使用Async 和 Promise 完美解决回调地狱

    很久以前就学习过Async和Promise,但总是一知半解的. 今天在写NodeJS的时候,发现好多第三方库使用回调,这样在实际操作中会出现多重回调,这就是传说中的JS回调地狱. 举个例子 有一个方法 ...

  4. ES6(promise)_解决回调嵌套简单应用

    一.前言 这个小案例是在node平台上应用的所以需要保证你的电脑: 1.安装和配置node.js环境 2.需要用node.js来开启一个http-server: 开启方法:https://blog.c ...

  5. 使用ES6的Promise完美解决回调地狱

    相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取. 年轻的前端可能会用同步去解决(笑~),因为我也这么干过,但是极度影响性能和用户体验. 正常的前端会把接口 ...

  6. promise对象的回调函数resolve的参数为另一个promise对象

    /*如果调用resolve函数和reject函数时带有参数,那么它们的参数会被传递给回调函数. reject函数的参数通常是Error对象的实例,表示抛出的错误: resolve函数的参数除了正常的值 ...

  7. promise对象解决回调地狱

    先放一张图片感受一下回调地狱 看起来是真的很让人头痛的东西 而现在我这里使用promise对象来解决回调地狱 采用链式的 then,可以指定一组按照次序调用的回调函数. 这时,前一个 then 里的一 ...

  8. ES6新增"Promise"可避免回调地狱

    Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...

  9. Promise对象和回调函数,解决异步数据传递问题

    下面的代码例子,均已小程序的异步请求数据为案例来说明 1.利用回调函数,来解决异步数据传递问题 异步操作api.js const getBooks = (url, callback) => { ...

随机推荐

  1. 转 Web用户的身份验证及WebApi权限验证流程的设计和实现

    前言:Web 用户的身份验证,及页面操作权限验证是B/S系统的基础功能,一个功能复杂的业务应用系统,通过角色授权来控制用户访问,本文通过Form认证,Mvc的Controller基类及Action的权 ...

  2. ArcGIS 产品体系结构

    1. 开篇 本文主要从以下几个方面介绍 ArcGIS 的产品体系 2. 详细介绍 2.1 ArcGIS Desktop 参考:[https://blog.csdn.net/hphone/article ...

  3. Alfred效率神器

    下图就是Alfred的主界面我们所有的操作都在这一个界面上进行.通过热键打开主界面(本人设置的是option+command),输入一个"a"后Alfred就会为我在候选界面上显示 ...

  4. linux模块驱动之led(ioremap)

    一:led内核驱动 (1)在编写led内核驱动时,我们首先要进行内核裁剪,因为友善之臂将LED灯的驱动默认加载到内核中,所以编写模块驱动程序前就要先把原先的LED灯驱动裁剪掉: led驱动在源码里面的 ...

  5. Go调用C代码,Cgo札记

    http://www.myexception.cn/program/679738.html Go调用C代码,Cgo笔记 参考: 官方文档: http://golang.org/cmd/cgo/ htt ...

  6. python基础autopep8__python代码规范

    关于PEP 8 PEP 8,Style Guide for Python Code,是Python官方推出编码约定,主要是为了保证 Python 编码的风格一致,提高代码的可读性. 官网地址:http ...

  7. mongoDB身份验证

    超级管理员 为了更安全的访问mongodb,需要访问者提供用户名和密码,于是需要在mongodb中创建用户 采用了角色-用户-数据库的安全管理方式 常用系统角色如下:root:只在admin数据库中可 ...

  8. dqname.go

    package nsqd func getBackendName(topicName, channelName string) string {     // backend names, for u ...

  9. Linux 下配置Nginx,MySql,php-fpm开机启动

    一. Nginx 开机启动 1.在/etc/init.d/目录下创建脚本 vim /etc/init.d/nginx 2.编写脚本内容 (将以下复制进去相应改动安装路径) #!/bin/bash # ...

  10. 深度学习与自动驾驶领域的数据集(KITTI,Oxford,Cityscape,Comma.ai,BDDV,TORCS,Udacity,GTA,CARLA,Carcraft)

    http://blog.csdn.net/solomon1558/article/details/70173223 Torontocity HCI middlebury caltech 行人检测数据集 ...