144Vue-异步编程Promise解决回调地狱+对象方法+实例方法

最新推荐文章于 2023-04-04 02:41:29 发布
最新推荐文章于 2023-04-04 02:41:29 发布
阅读量519 收藏
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gy_9543/article/details/107866771
版权

vue省掉了dom操作、所以原生ajax和jquery的ajax不适用与vue

如果调用返回结果比较慢有可能不会按照代码顺序打印结果
可以都在写success里，可以按需要顺序得到【但是嵌套多了会出现回调地狱】
可以用promise解决

回调地狱


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div>前后端交互</div>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
    /*
      前后端交互-异步编程与Promise概述
    */
    // var ret = '---';
    // $.ajax({
    //   url: 'http://localhost:3000/data',
    //   success: function(data) {
    //     ret = data;
    //     console.log(ret)这里打印的没有问题是返回数据
    //   }
    // });
    // console.log(ret)因为是异步的所以这里打出来的是---

    // ----------------------------
    // $.ajax({
    //   url: 'http://localhost:3000/data',
    //   success: function(data) {
    //     console.log(data)
    //   }
    // });
    // $.ajax({
    //   url: 'http://localhost:3000/data1',
    //   success: function(data) {
    //     console.log(data)
    //   }
    // });
    // $.ajax({
    //   url: 'http://localhost:3000/data2',
    //   success: function(data) {
    //     console.log(data)
    //   }
    // });
    // -----------------------------------
    
    $.ajax({
      url: 'http://localhost:3000/data',
      success: function(data) {
        console.log(data)
        $.ajax({
          url: 'http://localhost:3000/data1',
          success: function(data) {
            console.log(data)
            $.ajax({
              url: 'http://localhost:3000/data2',
              success: function(data) {
                console.log(data)
              }
            });
          }
        });
      }
    });
    
    
    
  </script>
</body>
</html>

Promise概述

在这里插入图片描述
在这里插入图片描述

解决回调地狱

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript">
    /*
      基于Promise发送Ajax请求
    */
    function queryData(url) {
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
    // queryData('http://localhost:3000/data')
    //   .then(function(data){
    //     console.log(data);
    //   },function(info){
    //     console.log(info)
    //   });
    // ============================
    // 发送多个ajax请求并且保证顺序
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });
  </script>
</body>
</html>

04-then参数中的函数返回值

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript">
    /*
      then参数中的函数返回值
    */
    function queryData(url) {
      return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
    }
    queryData('http://localhost:3000/data')
      .then(function(data){
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        return new Promise(function(resolve, reject){
          setTimeout(function(){
            resolve(123);
          },1000)
        });
      })
      .then(function(data){
        return 'hello';
      })
      .then(function(data){
        console.log(data)
      })

  </script>
</body>
</html>

在这里插入图片描述

05-Promise常用API-实例方法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript">
    /*
      Promise常用API-实例方法
    */
    // console.dir(Promise);
    function foo() {
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          // resolve(123);
          reject('error');
        }, 100);
      })
    }
    // foo()
    //   .then(function(data){
    //     console.log(data)
    //   })
    //   .catch(function(data){
    //     console.log(data)
    //   })
    //   .finally(function(){
    //     console.log('finished')
    //   });

    // --------------------------
    // 两种写法是等效的
    foo()
      .then(function(data){
        console.log(data)
      },function(data){
        console.log(data)
      })
      .finally(function(){
        console.log('finished')
      });
  </script>
</body>
</html>

06-Promise常用API-对象方法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript">
    /*
      Promise常用API-对象方法
    */
    // console.dir(Promise)
    function queryData(url) {
      return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
    }

    var p1 = queryData('http://localhost:3000/a1');
    var p2 = queryData('http://localhost:3000/a2');
    var p3 = queryData('http://localhost:3000/a3');
    //执行顺序按照数组里的顺序输出
    // Promise.all([p1,p2,p3]).then(function(result){
    //   console.log(result)
    // })
    Promise.race([p1,p2,p3]).then(function(result){
      console.log(result)
    })
  </script>
</body>
</html>

在这里插入图片描述

服务器端路由代码

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
// 处理静态资源
app.use(express.static('public'))
// 处理参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 设置允许跨域访问该服务
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Headers', 'mytoken');
  next();
});
app.get('/async1', (req, res) => {
  res.send('hello')
})
app.get('/async2', (req, res) => {
  if(req.query.info == 'hello') {
    res.send('world')
  }else{
    res.send('error1')
  }
})

app.get('/adata', (req, res) => {
  res.send('Hello axios!')
})
app.get('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
  res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.delete('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})
app.post('/axios', (req, res) => {
  res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
  res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

app.get('/axios-json', (req, res) => {
  res.json({
    uname: 'lisi',
    age: 12
  });
})


app.get('/fdata', (req, res) => {
  res.send('Hello Fetch!')
})
app.get('/books', (req, res) => {
  res.send('传统的URL传递参数!' + req.query.id)
})
app.get('/books/:id', (req, res) => {
  res.send('Restful形式的URL传递参数!' + req.params.id)
})
app.delete('/books/:id', (req, res) => {
  res.send('DELETE请求传递参数!' + req.params.id)
})
app.post('/books', (req, res) => {
  res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd)
})
app.put('/books/:id', (req, res) => {
  res.send('PUT请求传递参数!' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

app.get('/json', (req, res) => {
  res.json({
    uname: 'lisi',
    age: 13,
    gender: 'male'
  });
})

app.get('/a1', (req, res) => {
  setTimeout(function(){
    res.send('Hello TOM!')
  },1000);
})
app.get('/a2', (req, res) => {
  setTimeout(function(){
    res.send('Hello JERRY!')
  },2000);
})
app.get('/a3', (req, res) => {
  setTimeout(function(){
    res.send('Hello SPIKE!')
  },3000);
})

// 路由
app.get('/data', (req, res) => {
  res.send('Hello World!')
})
app.get('/data1', (req, res) => {
  setTimeout(function(){
    res.send('Hello TOM!')
  },1000);
})
app.get('/data2', (req, res) => {
  res.send('Hello JERRY!')
})

// 启动监听
app.listen(3000, () => {
  console.log('running...')
})
教练我真的想敲代码
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
搭建一个vue项目(vue+vuex+vue-router+scss+es6+element+axios)
多喝凉白开
07-17 578
一、安装依赖 选择创建项目所在文件夹，cmd进入该项目 全局安装vue-cli npm install -g @vue/cli //全局安装vue-cli npm uninstall -g vue-cli //卸载全局vue-cli 查看是否安装成功 键入vue --version ，出现以下版本号，则代表成功 二、创建项目 vue create vue-test // vue-test为项目名称 分别代表的是： 选择模式：手动选择配置 选择需要的配置：babel(es6编译)、vue
vue-advanced-chat使用指南（socket.io+node+vue实现聊天）
最新发布
beekim的博客
11-02 1711
messageSelectionActions: [{ name: 'deleteMessages', title: '你确定要删除嘛？' }]
vue中promise的使用及异步请求数据的方法
10-17
主要介绍了vue中promise的使用及异步请求数据的方法,文章给大家较详细的介绍了遇到的问题及解决方法，需要的朋友可以参考下
vue 回调地狱
weixin_63722092的博客
04-28 535
<script src="JQuery.js"></script> <script> // 拿到a的数据后才去请求b，拿到b的数据后再去请求c 这就叫回调地狱 // 像这种回调嵌套回调的写法就叫回调地狱 // $.ajax({ // method: "get", // url: "data.json", // success(res) { ...
Vue 利用Promise解决回调地狱
wujf90的博客
11-16 497
Vue 利用Promise解决回调地狱
JS异步编程
Ivana_zyf的博客
02-28 287
JS语言的执行环境是“单线程”为什么会出现异步编程呢？ 单线程是指一次只能完成一件任务。如果有多个任务的话就必须排队，等前面的任务执行完才能执行下一个任务。 两种任务执行模式：同步和异步 “异步模式”： 回调函数是异步编程最基本的方法。每一个任务有一个或多个回调函数，前一个任务执行后不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束后就执行，所以程序的执行顺序与任务的排...
回调地狱是什么？如何解决？
G_Z_X的博客
03-17 372
层层嵌套的异步函数的操作叫做回调地狱，它不便于代码的维护，相当复杂。 那么我们又该如何解决回调地狱呢？ 我们可以用promise解决。 那么promise有什么状态呢？ pending: 初始状态，既不是成功状态，也不是失败状态 fulfilled: 操作成功完成 rejected: 操作失败 注意：Promise本身只是个容器，不是异步的，其中要完成的任务才是异步的。 then方法接受的第一个函数的参数，对应着生成Promise函数中接收的resolve；第二个函数的参数，对应着reject. then方
vue-resource调用promise取数据方式详解
08-29
Promise对象可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。 在Vue-Resource中，可以使用Promise API来处理响应结果。使用then方法可以处理响应结果，then方法有两个参数，第一个参数是响应...
vue+webpack实现异步组件加载的方法
11-29
需要注意的是，`require.ensure`在Webpack编译后实际上会变为一个具有`then`方法的Promise实例，即`_webpack_require_.e`。这意味着我们可以将`require.ensure`的回调函数放入`_webpack_require_.e.then(fn)`中，...
解决Vue-Router升级导致的Uncaught (in promise)问题
10-14
这个问题通常是由于在新版本中，`push`和`replace`方法返回了一个Promise对象，如果在路由跳转过程中出现异常，而这个Promise没有被捕获，就会在控制台引发未处理的错误。 首先，我们需要理解Vue-Router在3.1.0版本...
vue的异步组件
Liu_Jun_Tao的博客
08-21 1468
在使用vue做单页应用或大型的网站时，随着功能的增多，组件文件也会随着增加，如果在第一次运行应用时，就加载所有的组件，就会造成性能影响，导致打开时间很长。 在实际开发中，一个应用都是多个小组件组成的，对于一些非核心组件，不是立刻就需要加载的内容，就可以使用异步组件。 vue允许使用一个工厂函数定义组件，这个工厂函数会异步解析组件。只有在这个组件被渲染的时候，才会触发这个工厂函数 ，且会把结果...
vue项目中promise解决回调地狱和并发请求
情非得已小猿猿
12-29 2215
场景： ---- 需要同时请求5个接口 ---- 都请求成功后执行下一步操作 解决方法： 定义一个变量i=5，请求成功一个接口，让i–，直到i=0时执行下一个操作，否则不执行 axios.all 并发请求，.then(axios.spread(function(callback1, callback2)){})回调 promi.all 并发请求，.then(function([call...
异步编程--回调地狱
jiaojsun的博客
09-27 664
1.什么叫回调地狱 实际应用场景 &lt;script type="text/javascript"&gt; /** * 异步任务处理：回调 * * callback hell：回调地狱 */ /** * 任务链 * 我们的任务可能是一个接着一个的，而且是有依赖关系的 */ var xhr = new XM...
解决回调地狱问题
weixin_34037515的博客
03-09 179
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue前端交互模式、Promise用法（回调地狱）
tkrj7_的博客
02-17 3561
前端交互模式 接口调用方式 原生ajax 基于jQuery的ajax fetch axios URL地址格式 传统形式的URL 格式：schema://host:port/path?query#frahment schema：协议。例如http、https、ftp等（必需） host：域名或者IP地址（必需） port：端口，http默认端口80，可以省略 path：路径，例如/abc/a/b/c（虚拟路径，区分不同资源） query：查询参数，例如uname=tkrj&age=19 fr
回调地狱的多种解决方式
关注最新技术问题并持续维护更新
04-24 5903
什么是回调地狱     异步的JavaScript程序，或者说使用了回调函数的JavaScript程序，很难地去直观顺畅地阅读，大量的代码以下面这种方式结束。简单说，就是函数作为参数层层嵌套。代码以此种形式展现时无疑是不利于我们阅读与维护的。 setTimeout(function (name) { var catList = name + ',' setTimeout(funct...
ajax解决回调地狱,Vue之基于Promise发送Ajax请求并处理回调地狱问题
weixin_36251012的博客
08-05 326
Vue之基于Promise发送Ajax请求并处理回调地狱问题实例如下：Vue之基于Promise发送Ajax请求并处理回调地狱问题 xinbiancheng.cn// 基于Promise发送Ajax请求并处理回调地狱问题function queryData(url) {var p = new Promise(function (resolve, reject) {var xhr = new XML...
【Vue3】axios获取数据异步变同步，解决“回调地狱”问题，以及解决通过async和await出现Promise ＜pending＞问题（新手终极解决方案）
【敦厚的曹操】的专栏
02-19 3356
axios获取数据异步变同步，解决“回调地狱”问题，以及解决通过async和await出现Promise 问题（新手终极解决方案）
浅理解回调地狱并使用 Promise 解决此问题
黛琳ghz的博客，期待你的关注。
04-04 1608
好久没写面试题的文章了，今天这篇文章讲一讲我之前遇到一个面试题，当时在跟面试官聊了原型链、vue生命周期后，他问到了我什么是 Promise、然后又聊到了回调地狱，及其解决方法。当然了还有聊到async和await，这篇文章先不细聊async和await。在前端开发的面试中，异步编程是经常问到的知识点，所以Promise、async、await的等知识点要熟练掌握。
vue-resource使用Promise取数据完全解析
successCallback和errorCallback分别是成功和错误回调函数，它们接收服务器返回的数据或错误信息。 当我们发送请求时，可以传递一些选项（options）来配置请求，比如设置请求头、超时时间、携带cookie等。例如： `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值