Promise基础使用

Sarlren

发布于 2022-10-28 11:27:57

3910

发布于 2022-10-28 11:27:57

文章被收录于专栏：Sarlren的笔记

Promise被用于异步请求调用。

异步请求有几种，

文件操作，fs

nodejs里读取文件的代码示例如下:

require('fs').readFile(path, (err, data) => {
    yourDealWithData()
})

数据库操作

AJAX

这里简单写写AJAX的例子。AJAX分四步，创建对象：

const xhr = new XMLHttpRequest()

初始化，设置方式和链接:

xhr.responseType = 'json' // 这步可选
xhr.open('GET', 'http://www.baidu.com')

发送:

xhr.send()

处理结果：

xhr.onreadystatechange = () => {
    if (xhr.readyStatus === 4 && xhr.status >= 200 && xhr.status <= 300) {
        console.log(xhr.response)
    }else {
        console.log(xhr.status)
    }
}

定时器

1.Promise基础用法

直接给出例子，下面异步启动一个计时器。

var a = 50
const p = new Promise((resolve, reject) => { // 两个参数，分别对应成功失败
    setTimeOut(() => { // 这里内部写了一个计时器
        a = yourTargetNumber
        if (a > 60) {
            resolve(a) // 成功分支，不传参数就是直接成功，传参数可以给then接着使用
        }else {
            reject(a)
        }
    }, 1000)
})

p.then((resolveValue) => { // 第一个是成功参数，不写也可以
    print($'resolve!{resolveValue}')
}, (rejectValue) => {
    print($'reject for {rejectValue}')
})

2.封装函数变成Promise风格

例子就是将文件操作封装，其中引入util.promisify。见下：

const util = require('util')
const fs = require('fs')

let myReadFile = util.promisify(fs.readFile) // 这行将函数变成我们想要的函数变量，外面套一个promisify。

myReadFile(path).then(value => { // 此处的then就是promise风格的
    console.log(value)
})

上面的封装比较快捷。如果想封装AJAX，就需要显式地写一个function了。

function myAJAX(url) {
    return new Promise((resolve, reject) => {
        All your AJAX operations.
    })
}

myAJAX('http://www.baidu.com').then(value => {}, reason => {})//使用

3.promise一些语法糖

promise可以对一个多promise数组进行调用，里面有all方法，当全都返回resolve才resolve。当promise多重嵌套的时候，即p.then().then().then()嵌套下去，某个then里面的reject可以不一定在下一个then里面处理，在最后一个then里面处理即可。如果像上面的promise嵌套想要中止，在想中止的then里面return new Promise(() => {})即可。

async和await能用来简化代码,await可以直接放在等号右边，而等号左边直接是异步获得的信息。其中await应该后跟一个Promise对象，async用来放到function关键字前面表示异步。当await读取到reject则需要try-catch捕获。例子如下：

async function main() {
    try{
        let data1 = await myReadFile(path1) // myReadFile同上
        let data2 = await myReadFile(path2)
        let data3 = await myReadFile(path3) 
        console.log(data1 + data2 + data3)
    }catch (err) {
        console.log(err)
    }
}
main()

这同样可以封装AJAX。例子如下：

let btn = document.querySelector('#btn')
btn.addEventListener('click', **async** function() {
    let content = await sendAJAX(url) // 和上述sendAJAX一致
    console.log(content)
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-01-15，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax