欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript高级篇 ES6(Promise)

程序员文章站 2024-01-08 17:09:22
Promise 是什么是一种异步解决的方案 比es5传统的解决异步的方案（回调函数）es6提供了promise对象以前处理异步的方式// 后者要等待前者执行的结果 f2 要等待 f1执行完function f1(callback){ setTimeout(()=>{ var res = 'f1' console.log('我先执行从后台获取到了f1'); callback(res) },1000)}function f2(v...

Promise 是什么

是一种异步解决的方案 比es5传统的解决异步的方案（回调函数）
es6提供了promise对象

以前处理异步的方式

// 后者要等待前者执行的结果 f2 要等待 f1执行完
function f1(callback){
    setTimeout(()=>{
        var res = 'f1'
        console.log('我先执行从后台获取到了f1');
        callback(res)
    },1000)
}
function f2(value){
    console.log(value);
}

f1(f2)

基本用法

const promise = new Promise(function(resolve,reject){
    setTimeout(()=>{
        var flag = false;
        flag ? resolve('成功') : reject('失败')
    },1000)
})

promise.then(
    (res)=>{console.log(res)},
    (res)=>{console.log(res);
    }

)

会立即执行的

// promise新建后会立即执行
const promise = new Promise(function(resolve,reject){
    console.log('promise');
    resolve()
})

promise.then(function(){
    console.log('resolve');
})

console.log('hello');

配合原生的ajax实现案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>peomise案例</title>
</head>

<body>
    <script>
        const getJson = function (url) {
            return new Promise(function (reslove, reject) {
                const handel = function () {
                    // 能不能想到一个关键数字
                    if (this.readyState !== 4) {
                        return
                    }
                    if (this.status === 200) {
                        // 成功的结果
                        reslove(this.response)
                    } else {
                        // 失败的结果
                        reject(new Error(this.statusText))
                    }
                }
                const client = new XMLHttpRequest()
                client.open("GET", url)
                client.onreadystatechange = handel
                client.responseType = 'json'
                client.setRequestHeader('Accept', 'application/json')
                client.send()
            })
        }
        getJson(`http://127.0.0.1:2000/name`).then(
            // 成功的
            // 拿到结果后爸第一项的id传递给后台 后台根据id返回对应的 人物武器的名字
            (res) => {
                console.log(res);
                const id = res.data[2].id
                return getJson(`http://127.0.0.1:2000/wepon?id=${id}`)
            }
        ).then((res) => {
            console.log(res)
        })
    </script>
</body>

</html>

Promise.then()

.then方法是定义在原型上的 Promise.prototype
.then之后会返回一个新的promise对象

Promise.catch()

// promise 会吃掉错误
// 建议用到promise的时候后面一般加上catch捕捉
const say = function(){
    return new Promise(function(resolve,reject){
        resolve(v+2)
    })
}
say().then(()=>{
    console.log('我是处理后的');
    
}).catch(
    (error)=>{
    console.log(error)
    return '123'
    }
).then((res)=>{
    console.log(res);
})

Promise.all()

// Promise.all 
// 一次性处理多个promise 生成一个新的promise
// Promise.all(p1,p2)
let promise1 = new Promise(function(resolve,reject){
    // resolve('promise11')
    reject('promise11')
})
let promise2 = new Promise(function(resolve){
    resolve('promise22')
})
Promise.all([promise1,promise2]).then(function(res){
    console.log(res);
}).catch((res)=>{console.log(res);
})

本文地址：https://blog.csdn.net/aa2528877987/article/details/107135707

上一篇： JavaScript闭包原理与用法学习笔记

下一篇： JS文件中的中文在网页引用时显示乱码的简单解决方式

推荐阅读