国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

回調、使用Promise封裝ajax()、Promise入門

godlong_X / 1269人閱讀

摘要:回調使用封裝入門回調是啥看這里回調是什么方應杭知乎是一種特殊的函數,這個函數被作為參數傳給另一個函數去調用。

回調、使用Promise封裝ajax()、Promise入門 1 回調是啥

call a function
call a function back

callback

看這里:Callback(回調)是什么?---方應杭知乎

callback 是一種特殊的函數,這個函數被作為參數傳給另一個函數去調用。這樣的函數就是回調函數。
1.1 回調例子

Callback 很常見
$button.on("click", function(){})
click后面的 function 就是一個回調,因為「我」沒有調用過這個函數,是 jQuery 在用戶點擊 button 時調用的(當用戶點擊之后,這個函數才執行,現在我只是傳了一個參數,這個參數是一個點擊后要執行的函數)。

div.addEventListener("click", function(){})
click 后面的 function 也是一個回調,因為「我」沒有調用過這個函數,是瀏覽器在用戶點擊 button 時調用的。

一般來說,只要參數是一個函數,那么這個函數就是回調。

請看我寫的封裝的簡易jQuery.ajax()中的successFN就是一個回調函數.

只有在請求成功并接收到響應的時候才會執行這個success函數,這就是回調.傳一個函數作為參數但是不執行,讓另一個函數去調用,就是回調函數

1.2Callback 有點反直覺

callback 有一點「反直覺」。
比如說我們用代碼做一件事情,分為兩步:step1( ) 和 step2( )。

符合人類直覺的代碼是:

step1()
step2()
callback 的寫法卻是這樣的:

step1(step2)
為什么要這樣寫?或者說在什么情況下應該用這個「反直覺」的寫法?

一般(注意我說了一般),在 step1 是一個異步任務的時候,就會使用 callback。

什么是異步任務呢?

2.什么是異步?

「每日一題」什么是異步?---方應杭知乎
下一篇博客再詳細記錄吧

3. $.Ajax()Promise 是什么?如何用?

「每日一題」Promise 是什么?

代碼都在這里

3.1 $.Ajax()中的promise

如果不使用promise,$.ajax請求的時候成功和失敗的回調函數是寫在參數里的,他是對象參數的一個值

$.ajax({
        method:"post",
        url:"/xxx",
        data:"username=mtt&password=1",
        dataType:"json",
        success:()=>{}//成功后的回調函數
        error:()=>{}//失敗后的回調函數
    }
    )

如果使用jQuery.axja()發送請求,并使用promise,代碼如下

let myButton = document.getElementById("myButton");

function success(responseText){
    console.log("成功")
    console.log(responseText);//responseTex
}
function fail(request){
    console.log("失敗")
    console.log(request);
}
myButton.addEventListener("click",(e)=>{
    //使用ajax
    $.ajax({
        method:"post",
        url:"/xxx",
        data:"username=mtt&password=1",
        dataType:"json"http://預期服務器返回的數據類型,如果不寫,就是響應里設置的
    }
    ).then(success,fail)//$.ajax()返回一個promise
})

成功的結果:

換一個不存在的地址/mtt失敗的結果

$.ajax()函數會返回一個promise,然后在后面.then(success,fail)時候,如果成功了就會調用第一個參數里的函數即success函數,如果失敗了就會調用第二個參數的函數即fail函數.

3.1.1 promise的第一個意義

promise的第一個意義:不用記住成功和失敗到底是success,還是successFN或者是fail或者是error,不用記住函數名字.只需要知道成功是第一個參數,失敗時第二個參數,比如這樣寫

 //使用ajax
    $.ajax({
        method:"post",
        url:"/xxx",
        data:"username=mtt&password=1",
        dataType:"json"http://預期服務器返回的數據類型,如果不寫,就是響應里設置的
    }
    ).then((responseText)=>{console.log(responseText)},()=>{console.log("失敗")})//$.ajax()返回一個promise

完全不需要寫函數名

3.1.2promise的第二個意義

如果你需要對一個結果進行多次處理,可以這樣寫:

$.ajax({
        method:"post",
        url:"/xxx",
        data:"username=mtt&password=1",
        dataType:"json"http://預期服務器返回的數據類型,如果不寫,就是響應里設置的
    }
    ).then((responseText)=>{
        console.log(responseText)
        return responseText;//如果要對結果進行多次處理,就在這里return,第二次then就會得到這個return的數據
    },()=>{
        console.log("失敗")
    }).then(//開始第二次then
        (上一次return的結果)=>{
            console.log("第二次處理")
            console.log(上一次return的結果)
        },
        ()=>{
            //第二次處理失敗結果
        }
    )

結果:

看到第二個then里的函數吧第一次then里return的結果當做參數,繼續處理.
所以promise的好處是如果想再次用兩個函數,即再次對結果進行處理,就再then 一下,不需要再次取名字了
then的中文含義:然后!

以上就是ajax中promise的簡單使用,那么如何自己封裝一個呢?

PS:ajax()函數參數里的dataType:"json"http://預期服務器返回的數據類型,如果不寫,就是響應里設置的 即:
ajax方法中的dataType:預期服務器返回的數據類型。如果不指定,jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷。
4封裝一個類似$.Ajax()中的Promise的簡易版本(皮毛,以后深入)

接下來回到我們自己封裝的jQuery.Ajax()代碼.我們以此為基礎繼續來封裝promise

以前封裝的代碼在這里
也可以看我前一篇博客,里面有如何封裝Ajax()的方法和詳細過程.

原來的封裝Ajax()代碼核心部分:

window.jQuery.ajax = ({method,path,body,successFn,failFn,headers})=>{//ES6語法
    
    let request = new XMLHttpRequest();
    request.open(method,path);//配置

    for (const key in headers) {//遍歷header,設置響應頭
    let value = headers[key];
        request.setRequestHeader(key,value);
    }
    request.send(body);//發送,并配置響應體

    request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            if ( request.status>=200&&request.status<=400){
                successFn.call(undefined,request.responseText);//執行成功函數
            }else if(request.status>=400){
                failFn.call(undefined,request);//執行失敗函數
            }
    }
    }
}
4.1開始封裝

封裝之后的完整代碼

window.jQuery.ajax = ({method,path,body,headers})=>{//ES6語法
   //進行Promise封裝
    return new Promise((resolve,reject)=>{//這句話是套路,記住
        let request = new XMLHttpRequest();
        request.open(method,path);//配置

        for (const key in headers) {//遍歷header,設置響應頭
            let value = headers[key];
            request.setRequestHeader(key,value);
        }
        request.send(body);//發送,并配置響應體

        request.onreadystatechange = ()=>{
            if(request.readyState ===4){
                if ( request.status>=200&&request.status<=400){
                    resolve.call(undefined,request.responseText);//執行成功函數
                }else if(request.status>=400){
                    reject.call(undefined,request);//執行失敗函數
                }
            }
        }
    })
}

return 一個new Promise().
第一個要記住的:這個Promise必須接收一個函數,函數里面就是要做的事情(即發送請求,Ajax請求),一般來說,把所有東西放在里面,第一句就是return.然后要做的事情放在里面.
第二個要記住的:Promise接收的這個函數有兩個參數,一個叫做resolve.一個叫reject
前兩個要記住的寫出來就是

return new Promise((resolve, reject) => {
        //要做的事
    });

第三個要記住的:如果成功了就調一下resolve(),如果失敗了就調用reject(),所以Ajax()參數中不需要successFnfailFn
并且將成功行和失敗行對應的代碼分別改為
resolve.call(undefined,request.responseText);//執行成功函數reject.call(undefined,request);//執行失敗函數

上面是固定的套路
封裝完畢.
只分別修改了這幾行代碼

4.2如何調用
myButton.addEventListener("click",(e)=>{
    //使用ajax
    $.ajax({
        method:"post",
        path:"/xxx",
        body:"username=mtt&password=1",
        headers:{
            "content-type":"application/x-www-form-urlencoded",
            "mataotao":18
        }
    }).then(
        (responseText)=>{console.log(responseText);},//成功就調用這個函數
        (request)=>{console.log(request);}//失敗就調用這個函數
    )
})

ajax()函數后接上.then(),成功就調用then()函數第一個參數里的函數,失敗就調用then()函數第二個參數里的函數

簡單的Promise原理:

自己封裝后的Ajax()返回一個new出來的 Promise對象,一個Promise實例,這個Promise實例有一個then屬性,他是一個函數,所以可以調用then().而且then也會返回一個Promise對象.

Promise接收一個函數,這個函數就是你要做的事情

所以Promise本質上只是規定一種形式!

5 Promise總結

請背下這個代碼

Promise用法

function xxx(){
    return new Promise((f1, f2) => {
        doSomething()
        setTimeout(()=>{
            // 成功就調用 f1,失敗就調用 f2
        },3000)
    })
}

xxx().then(success, fail)

// 鏈式操作
xxx().then(success, fail).then(success, fail)

十五行代碼帶你搞懂Promise - 浪子的文章 -知乎

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96734.html

相關文章

  • Promise必知必會

    摘要:而真正的回調函數,是在的外面被調用的,也就是和中調用方法返回的是一個新的實例注意,不是原來那個實例。 前端開發中經常會進行一些異步操作,常見的異步有: 網絡請求:ajax IO操作: readFile 定時器:setTimeout 博客地址 回調 最基礎的異步解決方案莫過于回調函數了 前端經常會在成功時和失敗時分別注冊回調函數 const req = new XMLHttpRequ...

    muzhuyu 評論0 收藏0
  • ES6-7

    摘要:的翻譯文檔由的維護很多人說,阮老師已經有一本關于的書了入門,覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中,顯得越來越重要。為了讓編程更美好,我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書(中文版) 超詳細介紹promise的gitbook,看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

    mudiyouyou 評論0 收藏0
  • ES6(一) —— 異步編程解決辦法[從回調函數到promise,generator,async]

    摘要:回調函數這是最原始的一種異步解決方法。從的對象演化而來對象是提出的一種對異步編程的解決方案,但它不是新的語法,而是一種新的寫法,允許將回調函數的嵌套改成鏈式調用。 一、前言 異步編程對JavaScript來說非常重要,因為JavaScript的語言環境是單線程的,如果沒有異步編程將變得非常可怕,估計根本無法使用。這篇文章就來總結一下從最原始的回調函數到現在的ES6、ES7的新方法。 文...

    greatwhole 評論0 收藏0
  • ES6中Promise 承諾對象封裝異步操作解析

    摘要:有了對象,就可以將異步操作以同步操作的流程表達出來,避免了層層嵌套的回調函數。此外,對象提供統一的接口,使得控制異步操作更加容易。它的作用是為實例添加狀態改變時的回調函數。這時,第二個方法指定的回調函數,就會等待這個新的對象狀態發生變化。 Promise 是異步編程的一種解決方案,比傳統的解決方案(回調函數和事件)更合理和更強大。它由社區最早出和實現,ES6 將其寫進了語言標準,統一了...

    qianfeng 評論0 收藏0

發表評論

0條評論

godlong_X

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<