Promise fetch

时间：2021-05-11 16:29:42 阅读：18 评论：0 收藏：0 [点我收藏+]

什么是Promise：

Promise是回调地狱的解决方案之一，我们使用promise的语法来解决回调函数地狱的问题，使代码拥有可读写和可维护性。

（是高版本浏览器才提供给我们的一个构造函数，低版本浏览器不支持）

Promise的三个状态：

pending 异步的事情正在执行

fulfilled 异步的事情成功了

rejected 异步的事情失败了

Promise的基本语法：

　　1. 创建一个状态机

　　　　传入一个resolver函数　　

　　　　resolver里面有两个状态改变工具：成功resolve，失败reject

var p = new Promise( function( resolve , reject ){
     setTimeout( function(){
          // resolve();
　　　　　  // reject();
　　　　　  reject("hello 状态改变为失败"); 
　　　}, 3000 ); 
});
console.log(p);

　　2. 关注状态机的状态

　　　　成功处理　　then

　　　　失败处理　　then　　catch

       p.then(function( res ){
            // 如果状态成功了，那么会执行当前的函数；
            console.log("状态改变为 resolved" , res);
        })
        p.catch( function( res ){
            console.log("状态改变为 rejected" , res);
        })

注意： Promise的状态只可以改变一次

封装简单的Ajax　　（Promise的作用是去掉回调函数的）

promise 是啥？

　　promise就是一个对象；在 ajax 封装里面返回一个promise对象，在这个对象外面去监听状态的改变。

       function ajaxPromise( url ){
            var xhr = new XMLHttpRequest();
            xhr.open("GET",url,true);
            xhr.send();
            var p = new Promise( function( resolve ){
                xhr.onload = function(){
                    resolve(xhr.responseText);
                }
            })
            return p;
        }
        var p1 = ajaxPromise( "./04_CORS.php" );
        var p2 = p1.then( function( res ){
            console.log(res,"p1");
        })    
        var p3 = p2.then( function(res){
            console.log(res,"p2")
            var p3 = ajaxPromise( "./04_CORS.php" );
            return p3;
        })
        p3.then(function(res){
            console.log(res,"p3");
        })

fetch API 是浏览器已经封装好的一个API

fetch API 返回的结果就是promise

意味兼容性不好

        var data = {
            a : 1,
            b : 2
        }
        var p1 = fetch("./10_data.php",{
                        method: ‘POST‘, 
                        body: "a=1&b=2", 
                        headers: new Headers({
                            ‘Content-Type‘: ‘application/x-www-form-urlencoded‘
                        })
                });
        var p2 = p1.then( function( res ){
            return res.json();
        })
        p2.then( function(res){
            console.log(res);
        })
        console.log(p1);

Promise fetch

原文：https://www.cnblogs.com/SeventhMeteor/p/14753037.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)