js學習筆記（十一）

JavaScript

JavaScript 異步AJAX的fetch()方法

Fetch是一種處理http請求和響應的新一代ajax API。不只具備XMLHttpRequest的功能，並且更具可擴展性和高效性，能夠處理requests和response內容並實現管道化的操做，提供了全局的fetch()方法，屬於es6的標準方法。ref, google以及Promise對象。

1、fetch()用於GET請求

• fetch()方法主要有三個功能：建立請求對象&發送請求&**返回**promise對象並解析爲響應對象；
• fetch()傳入目標url（包括帶query的參數？&合成的url），並利用.then()管道來異步處理響應

//fetch利用GET方式進行請求，並處理響應內容
fetch('url').then(//then方法()處理知足或者拒絕的promise對象 
//包含兩個回調函數參數，分別是處理正確響應時的json轉換和處理錯誤響應的函數
    response=>{
    if(response.ok){return response.json()};//response ok,json化響應信息
    throw new Error('Request failed!'); //請求失敗
    },  //回調一
    networkError=>{console.log(networkError.message)} //回調二，網絡錯誤回調函數,完成第一個then()方法
).then(    //處理成功的response
    jsonResponse => {
    //處理響應信息的代碼
    //process response
    }
)//第二個then()方法結束。

參考模板代碼處理圖

2、fetch()方法用於POST請求

POST請求的方式與GET十分類似，不一樣的地方在於將fetch的參數換成了setting對象，對象中包含目標url,請求方法method以及json格式的請求體數據body等屬性。

//fetch方法同時也能夠用於POST方法，不一樣的是要是用設置對象來對請求方法和內容進行設置，與$.ajax()的POST設置相似
//fetch('url',{seetingobjetc}),POST方法須要傳入兩個參數，第一個是目標URL，第二個是方法的設置對象，包括method和數據body等。
fetch('url',{   //第二個參數爲設置對象
        method: 'POST',
        body: JSON.stringfy({id: '200'})  //json數據
            }
).then(         //隨後對數據進行處理，then(successcallback, errorcallback),第一個參數爲處理成功響應的回調函數，第二個參數爲處理錯誤響應的函數
response=>{
    if(response.ok){return response.json} //響應成功返回json類型的數據
    throw new Error('requests failed') //不成功拋出錯誤
    }, // 處理結束，因爲是then的參數須要逗號，分割
networkError => console.log(networkError.message)  //第二個函數處理請求失敗
//-----第一個then()結束-------
).then( //第二個then接收第一個then成功時返回的json響應對象並處理some process code...
jsonResponse=> {
    console.log(jsonResponse)
    //.....porcess code.......//
    return jsonResponse //例子，返回json
}
)

//簡化的寫法
fetch('url',{settingObj}).then(
success_call_back,failure_call_back).then(
response_process_func)
//第一個then()負責處理請求的成功/失敗，第二個then( )負責響應成功後內容處理

3、 async/await 關鍵字

async關鍵字修飾的函數將返回一個Promise對象。做爲ES7中的新標準，能夠替代原先的Promise對象的fetch().then()鏈方法,並將異步做爲同步來處理，進一步簡化異步的同步調用。
async function()函數表達式定義異步函數,並在其中包含await關鍵字來暫停等待,使得賦值操做在異步操做後才進行，看起來像同步操做來執行異步操做一個詳細講解(須要進一步學習!)

//使用示例方法
async function test(){
    try{
        let response =  await fetch('url',{setting obj})  //POST方法的時候須要對象來設置請求參數，await關鍵字用來等待異步操做的resolve，隨後賦值，將異步Promise中的then鏈用await來代替
        if(response.ok){
            let jsonResponse = await response.json()
            // process json響應
            return jsonResponse
        }
        throw new Error('Request Failed!')  //threw out error message拋出錯誤信息

    }   //try結束
    catch(error){
        console.log(error)
    }//捕捉錯誤信息並處理

}//函數結束

tips
1.fetch()方法返回Promise對象的解釋,相似於一個諾言，若是成功>#$%^@,若是失敗>^*&@%&
2.fetch講解
3.js對象與json對象的區別，json鍵名和js屬性名
- json 的鍵名要用雙引號括起，這是 json 語法規定的,數據格式
- js 對象的屬性名能夠不用引號括起，這是 js 語法約定的，編程語言中的對象
澄清1,2,python字典的鍵名也須要引號，只有對象的屬性纔不準要引號，能夠用object.prop來訪問
4.aysnc關鍵字以及await關鍵字的應用1,2,3,4,5，理解1，與先前比較，es7,與python的比較
5.js編譯器用於生成瀏覽器兼容代碼