Promise基本使用是怎样,then方法和catch方法怎么�

Admin 2022-06-28 群英技术资�

很多朋友都对“Promise基本使用是怎样,then方法和catch方法怎么用”的内容比较感兴趣,对此小编整理了相关的知识分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获,那么感兴趣的朋友就继续往下看吧!


Promise是ES6引入的异步编程的新解决。语法止Promise�-一个构造函数,
用来封装异步操作并可以获取其成功或失败的结果�

  • Promise 构造函�: Promise (excutor) {}
  • Promise.prototype.then 方法
  • Promise.prototype.catch 方法

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方法

当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方法

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应用 

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);
})

现在大家对于Promise基本使用是怎样,then方法和catch方法怎么用的内容应该都有一定的认识了吧,希望这篇能对大家有所帮助。最后,想要了解更多,欢迎关注群英网络,群英网络将为大家推送更多相关的文章�
标签� Promise

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部