千家信息网

Promise的介绍及基本用法是什么

发表于:2024-10-02 作者:千家信息网编辑
千家信息网最后更新 2024年10月02日,这期内容当中小编将会给大家带来有关Promise的介绍及基本用法是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Promise是ES6引入的异步编程的新解决方案
千家信息网最后更新 2024年10月02日Promise的介绍及基本用法是什么

这期内容当中小编将会给大家带来有关Promise的介绍及基本用法是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

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的介绍及基本用法是什么了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。

0