Promise基本使用是怎样,then方法和catch方法怎么�
Admin 2022-06-28 群英技术资�
Promise是ES6引入的异步编程的新解决。语法止Promise�-一个构造函数,
用来封装异步操作并可以获取其成功或失败的结果�
实例化Promise
new Promise()
在实例化的时候接受一个参数, 这个参数是一个函数�
这个函数有两个形参,resolve � reject
var promise = new Promise((resolve,reject) => { // 里面用于处理异步操作 })
我们在这里使用定时器来模拟异步操�
promise有三种状态,分别是:进行中、成功、失败�
var promise = new Promise((resolve,reject) => { // 这是一个异步操� setTimeout(() => { // 这里模拟获取数据 var data = '获取的数�' // 在得到数据之后我们可以调用resolve和reject方法来改变promise对象的状� resolve(data) // resolve可以将promise对象的状态改为成功,reject()可以promise将对象状态改为失� }, 1000); })
当promise对象的状态为成功或者失败时可以调用then方法
then方法接受两个参数,而且两个参数都是函数类型的�
promise对象的状态为成功时,会调用then方法的第一个参�
也是就说promise对象的状态为失败时,会调用then方法的第二个参数
第二个参数时可选的,如果不需要捕获失败可以省�
参数分别有一个形参,成功的函数叫value, 失败的err
promise.then(value => { // 当异步函数里面调用了resolve(data),也是就说promise对象的状态为成功时,会调用then方法的第一个参� console.log(value); // 'hello world' value就是resolve()方法传递过来的数据 }, err => { // 当异步函数里面调用了reject(data),也是就说promise对象的状态为失败时,会调用then方法的第二个参数 console.log(err); // err就是reject()方法传递过来的数据 })
调用then方法then方法的返回结果是Promise 对象,对象状态由回调函数的执行结果决�
如果回调函数中返回的结果是非promise类型的属性,状态为成功,返回值为对象的成功的�
let data = promise.then((val) => { // console.log(val.result); // 返回非Promise的情� // return val.result // 返回Promise的情� return new Promise( (resolve, reject) => { // resolve('ok') reject('err') }) }, err => { console.log(err); }) // 返回非Promise的情� 状态为成功,返回值为对象的成功的� // 返回结果是Promise 对象,对象状态由回调函数的执行结果决� // 抛出错误,状态为失败 console.log(data);
所以then可以链式调用使用方法可参见下面promise应用示例�
promise的catch方法是then(null, rejection)的别名,用于指定发生错误时的回调
Promise对象的状态为resolve,就会调用then方法的指定回调函�
const promise = new Promise((resolve, reject) => { resolve('ok') }) promise.then(val => { console.log(val); // ok }).catch(err => { console.log(err); })
如果promise的状态为rejected就会调用catch方法的回调函数来处理这个问题�
const promise = new Promise((resolve, reject) => { reject('err') }) promise.then(val => { console.log(val); }).catch(err => { console.log(err); // err })
如果then方法在运行中出现错误也会被catch方法捕获
const promise = new Promise((resolve, reject) => { resolve('err') }) promise.then(val => { console.log('ok'); // ok throw '出错了!�' // then里面抛出的错误会继续被catch捕获 }).catch(err => { console.log(err); // 出错了!� })
promise对象的错误具有冒泡的性质,会一直向后传递,直到被捕获为歀也就是说,错误总是会被下一个catch捕获�
const promise = new Promise((resolve, reject) => { resolve('ok') }) promise.then(val => { return new Promise((resolve, reject) => { reject('err') }) }) .then(val => { return new Promise((resolve, reject) => { reject('err') }) }) .catch(err => { // 以上产生的错误都可以被catch捕获� console.log(err); // err })
一般来说,不要在then方法中定义rejected状态回调函数(即then的第二个参数),而应总是使用catch方法�
promise读取文件,多个文件连续调�
在这个例子中我们用到了Node.js的文件模�
// 读取文件信息 const fs = require('fs')
在下面代码中我们使用了promise包装了异步函�
我们先来看看正常的文件读取操�
// 读取文件信息 const fs = require('fs') // 如果读取失败err就是一个错误对象,读取成功data就是数据 fs.readFile('./01.txt', (err, data) => { // 判断是否出现错误,如果读取错误就打印错误对象� if (err) { console.log(err); return } console.log(data.toString()); })
我们如果想在读取成功之后继续读取文件,就需要在回调函数中继续使用fs.readFile...去读取文件,嵌套层次一多,这样一来就会形成回调地狱�
接下来我们使用Promise的方式来读取文件
// 读取文件信息 const fs = require('fs') const promise = new Promise((resolve, reject) => { fs.readFile('./01.txt', (err, data) => { if (err) return reject(err) resolve(data) }) }) promise.then(val => { console.log(val.toString()); // 返回一个Promise对象 return new Promise((resolve, reject) => { fs.readFile('./02.txt', (err, data) => { if (err) return reject(err) resolve(data) }) }) }, err => { console.log(err); }) // 上一个then里面返回的是一个promise对象,我们可以继�.then .then(val => { console.log(val.toString()); return new Promise((resolve, reject) => { fs.readFile('./03.txt', (err, data) => { if (err) return reject(err) resolve(data) }) }) }, err => { console.log(err); }) .then(val => { console.log(val.toString()); }, err => { console.log(err); })
promise封装ajax请求
封装了ajax请求,使用then获取结果,让代码看起来更加简洁,解决了回调地狱的问题
const promise = new Promise((resolve, reject) => { // 创建对象 const xhr = new XMLHttpRequest() // 初始� xhr.open("GET", 'https://api.apiopen.top/getSongPoetry?page=1&count=20') // 发� xhr.send() // 绑定事件处理响应结果 xhr.onreadystatechange = function () { // 判断 // 进入最后一个阶段,所有的响应体都回来� if (xhr.readyState === 4) { // 判断响应� if (xhr.status >= 200 && xhr.status < 300) { // 表示成功 // console.log(JSON.parse(xhr.response)); resolve(JSON.parse(xhr.response)) } else { reject(xhr.status) } } } }) // 指定回调 promise.then((val) => { console.log(val); }, err => { console.log(err); })
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章给大家分享的是用JS实现简易的手机验证码输入框的内容,也就是在四个输入框中填入对应四位验证,每个输入框仅可输入一个数字,输入提交显示验证码的功能。实现具体效果及代码如下,感兴趣的朋友可以参考�
这篇文章主要介绍了VUE实现一个简单的学生信息管理系统,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
本文实例为大家分享了vue递归实现树形组件的具体代码,供大家参考,具体内容如下1. 先来看一下效果:2. 代码部分 (myTree.vue)图片可以自己引一下自己的图片,或者使用iconfont的css引入。template div class=tree ul class=ul
这篇文章主要为大家详细介绍了vue实现列表无缝滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
这篇文章主要为大家详细介绍了vue实现树状表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078