本篇內容主要講解“promise是不是es6的”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“promise是不是es6的”吧!

漳平網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站開發(fā)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)公司于2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)公司。

是的。promise是ECMAScript 6新增的引用類型，表示一個異步操作的最終完成或者失敗。promise是解決異步編程調用代碼邏輯編寫過于復雜的問題的，當網(wǎng)絡請求非常復雜時，就會出現(xiàn)回調地獄，這樣如果將這些代碼寫在一起就會看起來很復雜，且不利于閱讀，如果用promise的話就會讓代碼看起來更加美觀優(yōu)雅。

ECMAScript 6 增加了對 Promises/A+ 規(guī)范的完善支持，即 Promise 類型。一經推出，Promise 就大受歡迎，成為了主導性的異步編程機制。所有現(xiàn)代瀏覽器都支持 ES6 期約，很多其他瀏覽器 API 也以期約為基礎。

Promise 是 ECMAScript 6 新增的引用類型，表示一個異步操作的最終完成或者失敗。

一、promise函數(shù)是干什么的

promise函數(shù)是解決異步編程調用代碼邏輯編寫過于復雜的問題的，當網(wǎng)絡請求非常復雜時，就會出現(xiàn)回調地獄，這樣如果將這些代碼寫在一起就會看起來很復雜，且不利于閱讀，如果用promise的話就會讓代碼看起來更加美觀優(yōu)雅

二、Promise三種狀態(tài)

首先, 當我們開發(fā)中有異步操作時, 就可以給異步操作包裝一個Promise
異步操作之后會有三種狀態(tài)

pending：等待狀態(tài)，比如正在進行網(wǎng)絡請求，或者定時器沒有到時間。
fulfill：滿足狀態(tài)，當我們主動回調了resolve時，就處于該狀態(tài)，并且會回調.then()
reject：拒絕狀態(tài)，當我們主動回調了reject時，就處于該狀態(tài)，并且會回調.catch()

三、實現(xiàn)

1，then和catch

1.出于未決狀態(tài)的函數(shù)是同步的 會立即執(zhí)行
2.then和catch是異步的 就算promise對象里面沒有異步操作 讓then方法或者catch立即執(zhí)行 那么 這里兩個方法或被加入到事件隊列中等待執(zhí)行

//參數(shù) 函數(shù)（resolve,reject）
    new Promise((resolve, reject) => {
        setTimeout(() => {
            //請求成功的時候調用resolve
            resolve('22222')
            //請求失敗的時候調用reject
            reject('error message')
        }, 1000)
    }).then((data) => { //請求成功處理函數(shù)
        console.log(data)
    }).catch((err) => { //請求失敗處理函數(shù)
        console.log(err)
    })

2.確定狀態(tài)

1、在未決狀態(tài)的處理函數(shù)中 如果發(fā)生未捕獲的錯誤呀 那么狀態(tài)就會有pending 直接變成 rejected狀態(tài) 并且可以被catach捕獲

var pro = new Promise((resolve, reject) => {
            throw new Error("123");

            // try{
            //     throw new Error("123"); 
            // } catch(e) {}

            resolve(12);
            reject(34);
        })

        // pro.then(data => {
        //     console.log(data);
        // }, err => {
        //     console.log(err);
        // })


        console.log(pro);
        

        pro.then(data => {
            console.log(data);
            
        })

        pro.catch(data => {
            console.log(data);
            
        })

3.async和await

1.使用Promise：

const makeRequest = () =>
        getJSON().then(data => {
            console.log(data)
            return "done"
        })

    makeRequest()

2.使用Async：

async和await 是ES7提出來的
async作用：簡化函數(shù)返回值中promise對象的創(chuàng)建
一般情況下， async寫在函數(shù)的最前面，被修飾的函數(shù)的返回值 ，一定是promise對象。只有在某些特殊情況下 才會手動返回一個promise對象。

作用：和promise一樣 解決異步問題 但是他的好處在于 讓異步代碼和同步的一樣!!
注意點 : 同步方法我們拿到結果 是通過返回值，異步方法拿到結果，是靠回調函數(shù)。

async 和await使用的基本語法:

• 就是在普通函數(shù)前面加一個async 調用跟普通函數(shù)一樣

• async出現(xiàn)使用 一般都要和await配合使用

• await后面接的就是一個promise對象 await一定是在異步函數(shù)中使用的

const makeRequest = async () => {
 // await getJSON()表示console.log會等到getJSON的promise成功reosolve之后再執(zhí)行。
        console.log(await getJSON)
        return "done"
    }

    makeRequest()

3.區(qū)別

1.函數(shù)前面多了一個aync關鍵字。await關鍵字只能用在aync定義的函數(shù)內。async函數(shù)會隱式地返回一個promise，該promise的reosolve值就是函數(shù)return的值。(示例中reosolve值就是字符串”done”)
2.我們不能在最外層代碼中使用await，因為不在async函數(shù)內。

四.promise方法

var r1 = new Promise((resolve,reject) => {
            setTimeout(function(){
                resolve("我是第一個請求");
            },1000)
        })
        var r2 = new Promise((resolve,reject) => {
            setTimeout(function(){
                resolve("我是第二個請求");
            },3000)
        })
        var r3 = new Promise((resolve,reject) => {
            setTimeout(function(){
                resolve("我是第三個請求");
            },4000)
        })
        var r4 = new Promise((resolve,reject) => {
            setTimeout(function(){
                resolve("我是第四個請求");
            },500)
        })

1.all方法

有時候我們需要等待兩個或者多個請求都成功返回了再進行下一步操作，promise 的all方法是等所有的異步請求完成之后在進行下一步回調

Promise.all([r1,r2,r3,r4]).then(data => {
            console.log(data);
            
        })

2.race方法

請求同時發(fā)送出去 誰先回來 就是用誰的數(shù)據(jù)。

Promise.race([r1,r2,r3,r4]).then(data => {
           console.log(data);
           
       })

五.promise封裝ajax案例

<script>
       function toData(obj) {
               
               // 聲明一個數(shù)組 來裝每一組的數(shù)據(jù)
               var arr = [];
               if(obj !== null) {
                   for(var key in obj) {
                       let str = key + "=" + obj[key];
                       arr.push(str);
                   }
                   return arr.join("&");
               }
       }

       function ajax(obj) {
           return new Promise(function(resolve, reject) {
               // 給ajax所需要的參數(shù)設置默認值
               obj.type = obj.type || "get";
               obj.async = obj.async|| "true";
               obj.dataType = obj.dataType || "json";
               obj.data = obj.data || null;

               // 開始發(fā)送ajax請求
               var xhr;

               if(window.XMLHttpRequest) {
                   xhr = new XMLHttpRequest();
               } else {
                   // IE低版本的瀏覽器
                   xhr = new ActiveXObject("Microsoft.XMLHttp");
               }

               // 判斷是post請求 還是get請求
               if(obj.type === "post") {
                   xhr.open(obj.type, obj.url, obj.async);
                   // 設置請求頭
                   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                   xhr.send(toData(obj.data));

               } else {
                   var url = obj.url + "?" + toData(obj.data);
                   xhr.open(obj.type, url, obj.async);
                   xhr.send();
               }

               // 處理響應體
               xhr.onreadystatechange = function() {

                   if(xhr.readyState == 4) {
                       if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                           resolve(JSON.parse(xhr.responseText));

                       } else {
                           reject(xhr.status);
                       }
                   }
               }
           })
       }

       ajax({
           url : "./data.php",
           data : {
               name : "jack",
               age : 16
           }
       }).then(res => {
           console.log(res);
           
       }, err => {
           console.log(err);
           
       })
   
   </script>

到此，相信大家對“promise是不是es6的”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

本文題目：promise是不是es6的
網(wǎng)頁路徑：http://chinadenli.net/article6/jsgoog.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、關鍵詞優(yōu)化、品牌網(wǎng)站制作、ChatGPT、手機網(wǎng)站建設、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)