zoukankan      html  css  js  c++  java
  • vue-promise介绍和使用

       Promise能解决上面回调地狱引起的代码可读性特别差的问题,记住!promise并不会说有什么特别额外的功能,他就是把上面这种层层回调的代码变得结构清晰,可读性变高;

      为什么promise能使用其可读性变高呢?平时进行ajax异步请求和回调函数时是耦合在一起的,因此有时候看起来特别不美观,而promise就把异步请求和回调函数中的代码进行了分离,看如下代码:

      未使用promise前:

    $.get("test.cgi", {
            name: "John",
            time: "2pm"
          },
          function (data) {
            alert("Data Loaded: " + data);
            alert("Data Loaded: " + data);
            alert("Data Loaded: " + data);
            alert("Data Loaded: " + data);
            alert("Data Loaded: " + data);
            alert("Data Loaded: " + data);
            alert("Data Loaded: " + data);
    });     

      使用promise后:

      new Promise((resolve, reject) => {
        //执行异步请求
        $.get("test.cgi", {
            name: "John",
            time: "2pm"
          },
          function (data) {
            resolve(data)
          });
      }).then(data => {
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
        alert("Data Loaded: " + data);
      })

      稍微解析下,resolve和reject都是函数,当执行resolve函数时,相当调用后面的then方法,resolve传入什么参数,then就可接受什么参数;reject函数会调用catch方法,上面没有写,一般是请求成功就调用resolve进而then处理,失败调用reject进而catch处理。

      我们发现,异步请求的代码放在了new Promise(),回调函数要处理的代码放在的then(),这就实现了异步请求和回调后的处理代码的分离。promise可以理解成是对 异步操作的一个封装,仅仅是封装,别想太多了,异步请求和回调该咋执行还咋执行。

  • 相关阅读:
    vue打包传递参数配置域名
    相同域名nginx下部署两个vue项目
    vue项目改造服务端渲染
    vue项目使用less全局变量
    postMessage跨域实现localstorage跨域共享
    node_webkit打包成桌面应用程序
    vue项目本地服务器设置既能localhost访问又能手机ip访问
    GATT scan的流程
    Windows下面的常用的快捷键
    把驱动编译进内核和编译成模块
  • 原文地址:https://www.cnblogs.com/ibcdwx/p/14613961.html
Copyright © 2011-2022 走看看