当前位置： 移动技术网 > IT编程>开发语言>JavaScript > (精华)2020年7月5日 JavaScript高级篇 ES6(Promise)

(精华)2020年7月5日 JavaScript高级篇 ES6(Promise)

2020年07月07日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网