iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中Promise的使用方法详情
  • 150
分享到

vue中Promise的使用方法详情

2024-04-02 19:04:59 150人浏览 安东尼
摘要

目录一、使用1.promise是一种异步解决方案2.async await简介: promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个还好,如果

简介:

promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个还好,如果是一个请求回来的数据还要被其他请求调用,不断地嵌套,可想而知,代码看起来是很乱的,promise主要是为了解决这种情景而出现的。

一、使用

1.promise是一种异步解决方案

  • 由于ajax异步方式请求数据时,我们不能知道数据具体回来的事件,所以过去只能将一个callback函数传递给ajax封装的方法,当ajax异步请求完成时,执行callback函数。
  • promise对象接受resolve和reject两个参数,当一个异步动作发生时,promise对象会通过resolve完成对动作成功进行解析,reject会捕获这个动作的异常。一个promise对象,通过new Promise().then()执行下一步骤操作。
  • axiOS is a promise based Http client for the browser and node.js。也就是说,使用axios发出请求,难免涉及promise。

Promise构造函数的参数是一个函数,函数里面的代码是异步的,即Promise里面的操作,和Promise()外面的操作时异步"同时"进行的。Promise中的函数的第一个参数是回调函数,resolve用来触发then里面的代码,第二个参数是回调函数,reject用来触发catch中的代码,throw new Error();也可以触发catch,

resolve和reject是两个回调函数,调用resolve会触发then,reject会触发catch:

<script>
new Promise((resolve, reject) =>{
    setTimeout(() =>{
        //成功的时候调用resolve
        resolve('成功data')
        //失败的时候调用reject
        reject('error message')
    }, 1000)
}).then((data) =>{
    //处理成功后的逻辑
    console.log(data);//这个data 是接收的resolve参数--
}).catch((err) =>{
    console.log(err);
})
</script>  
  • 在一个promise链中,只要任何一个promise被reject,promise链就被破坏了,reject之后的promise都不会再执行,而是直接调用.catch方法。
p1().then(p2).then(p3)
  .then(function(data) {
    console.log('data: ' + data);
  })
  .catch(function(error) {
    console.log('error: ' + error);
  });
  
function p1() {
  return new Promise(function(resolve, reject) {
    console.log('p1 resolved');
    resolve(123);
  });
}
  
function p2() {
  return new Promise(function(resolve, reject) {
    console.log('p2 rejected');
    reject(456);
  });
}
  
function p3() {
  return new Promise(function(resolve, reject) {
    console.log('p3 resolved');
    resolve(789);
  });
}// 执行结果p1 resolvedp2 rejectederror: 456

2.async await

Promise构造函数的参数是一个函数,函数里面的代码是异步的,即Promise里面的操作,和Promise()外面的操作时异步"同时"进行的。此外,只要在函数前面加上async 关键字,也可以指明函数是异步的。

async关键字实际是通过Promise实现,如果async 函数中有返回一个值 ,当调用该函数时,内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回,但如果timeout 函数内部抛出错误,那么就会调用Promise.reject() 返回一个promise 对象。若某函数调用一个异步函数(比如内部含有primise),该函数应用async修饰。

await表示“等待”,修饰返回promise 对象的表达式。注意await 关键字只能放到async 函数里面。

function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}//写一个async 函数,从而可以使用await 关键字, await 后面放置的就是返回promise对象的一个表达式,所以它后面可以写上 doubleAfter2seconds 函数的调用
async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}

await 等待后面的promise对象执行完毕,然后拿到promise resolve 的值并进行返回。显然await可以修饰axios请求,等待得到结果再往下进行,如:

async getUserList(){
            const {data: res} = await this.$http.get('users', {
                params: this.queryInfo
            })
            //console.log(res)
            if (res.meta.status !== 200) return this.$message.error('获取用户列表失败! ')
            this.userlist = res.data.users
            this.total = res.data.total
        }

到此这篇关于Vue中Promise的使用方法详情的文章就介绍到这了,更多相关vue中Promise的用法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue中Promise的使用方法详情

本文链接: https://www.lsjlt.com/news/141308.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中Promise的使用方法详情
    目录一、使用1.promise是一种异步解决方案2.async await简介: promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个还好,如果...
    99+
    2024-04-02
  • Vue中使用 class 类样式的方法详情
    目录1. 布尔值2.表达式3.多类封装4.可以直接在 v-bind:中使用数组形式使用class类在vue中为我们提供了 几种方式来使用class类的样式 1. 布尔值 我们先正常在...
    99+
    2024-04-02
  • 详解JavaScript中Promise类的使用方法
    目录1. all 2.  allSettled3.  race4. any 这篇主要讲一下Promise的类方法的基本使用...
    99+
    2023-05-19
    JavaScript Promise类使用 JavaScript Promise类
  • Vue插件使用方法详情分享
    目录一.应用场景二.使用方法1.使用自定义插件2.使用第三方插件【elementUI】一.应用场景 为vue添加全局功能,比如添加全局的方法和属性、混入全局组件、添加全局资源(指令、...
    99+
    2024-04-02
  • vue 中使用 bimface详情
    目录1. 安装 vue 脚手架2. 创建项目3.1 运行项目3.2 引入 bimface 文件4. 实现页面渲染4.1 修改 html4.2 修改 CSS4.3 修改 JS整个过程分...
    99+
    2024-04-02
  • Java中API的使用方法详情
    目录1.API1.1API概述1.2API帮助文档的具体使用2.String类2.1String类概述2.2String类的特点2.3String类的构造方法2.4创建字符串对象两种...
    99+
    2024-04-02
  • vue中的Promise如何使用
    本篇内容主要讲解“vue中的Promise如何使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue中的Promise如何使用”吧!简介:promise是什么,它可以说是异步编程的一种解决方法...
    99+
    2023-06-29
  • Vue中使用js-cookie详情
    目录一、安装js-cookie二、使用1、局部使用2、全局使用一、安装js-cookie cnpm i -S js-cookie 二、使用 1、局部使用 import Cookie...
    99+
    2024-04-02
  • JavaScript中Promise的使用方法实例
    目录前言Promise简介什么是回调地狱Promise的特点创建Promise实例then方法resolve 和 reject 的参数传递then()链式调用then()的返回值ca...
    99+
    2024-04-02
  • JavaScript中数组reduce()方法使用详情
    语法: reduce()对数组中的每个元素进行累加,返回一个新的值,可以传入初始值简单的讲就是返回数组中所有元素的和数  不会改变原始组的值  不会对空数组执行回...
    99+
    2024-04-02
  • Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
    目录1.Promise 的 then 方法使用  2. async await 使用3. async/await处理多个异步请求1.Promise 的 then 方法使用 ...
    99+
    2023-01-12
    Promise 的 then 方法使用 async await 使用 async/await处理多个异步请求
  • Vue中XMLHttpRequest的使用方法详解
    Vue中使用XMLHttpRequest(XHR)来获取数据的方式与传统的HTML页面相同。以下是Vue中XMLHttpRequest的详细使用方法: 1.创建XMLHttpRequ...
    99+
    2023-05-19
    Vue XMLHttpRequest使用方法 Vue XMLHttpRequest Vue XMLHttpRequest
  • javascript中Promise使用详解
    目录一、首先,要知道为什么要用Promise语法?二、接着,来了解一下回调地狱(Callback Hell)三、最后,也是本章的重头戏,Promise的基本使用(一) resolve...
    99+
    2024-04-02
  • 怎么使用Promise方法
    这篇文章主要介绍“怎么使用Promise方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用Promise方法”文章能帮助大家解决问题。 以下是使用 Pro...
    99+
    2024-04-02
  • Vue slot插槽的使用详情
    目录1、为什么使用slot 1.1 slot(插槽)1.2 组件中的插槽1.3 例子2、如何封装这类组件(slot)3、 插槽的案例4、插槽默认值5、具名插槽6、编译作用域7、作用域...
    99+
    2024-04-02
  • vue activated在子组件中的使用详情
    页面:base: <template> <div class="tab-container"> <h1 style="text-ali...
    99+
    2024-04-02
  • Vue中watch使用方法详解
    目录前言watchimmediate和handlerdeep拓展前言 说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他...
    99+
    2023-01-28
    Vue watch用法 Vue watch原理
  • ES6的Promise用法详解
    目录什么是Promisereject的用法catch的用法all的用法race的用法什么是Promise Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有al...
    99+
    2024-04-02
  • Vue中使用装饰器的方法详解
    目录前言什么是装饰器?装饰器的使用js中使用装饰器不使用装饰器vue 中使用装饰器一些常用的装饰器1. 函数节流与防抖2. loading3. 确认框总结前言 相信各位在开发中一定遇...
    99+
    2024-04-02
  • vue中使用echarts的方法实例详解
    1、安装 npm install echarts --save 2、在vue中引入(全局引入) // 引入echarts import echarts from 'echarts'...
    99+
    2023-05-19
    vue echarts 安装
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作