目標：
　　能夠說出什麼是前後端互動模式
　　能夠說出Promise的相關概念和用法
　　能夠使用fetch進行介面呼叫
　　能夠使用axios進行介面呼叫
　　能夠使用async/await方式呼叫介面
　　能夠基於後臺介面實現案例
目錄：
　　前後端互動模式
　　Promise用法
　　介面呼叫-fetch用法
　　介面呼叫-axios用法
　　介面呼叫async/await用法
　　基於介面的案例

1、前後端互動模式
1.1、介面呼叫方式
　　原生Ajax
　　基於jQuery的Ajax
　　fetch
　　axios
1.2、URL地址格式
傳統形式的URL
　　格式：schema://host:port/path?query#fragment
　　　　schema:協議。例如http、https、ftp等
　　　　host:域名或IP地址
　　　　port:埠，http預設埠80，可以省略
　　　　path:路徑，例如/abc/a/b/c
　　　　query:查詢引數，例如uname=lisi&age=12
　　　　fragment:錨點（雜湊Hash），用於定位頁面的某個位置
　　符合規則的URL:
　　　　http://www.baidu.com
　　　　http://www.baidu.com/java/web
　　　　http://www.baidu.com/java/web?flag=1
　　　　http://www.baidu.com/java/web?flag=1#function
Restful形式的URL
　　HTTP請求方式
　　　　GET 查詢
　　　　POST 新增
　　　　PUT 修改
　　　　DELETE 刪除
　　符合規則的URL地址
　　　　http://www.baidu.com/books GET
　　　　http://www.baidu.com/books POST
　　　　http://www.baidu.com/books/123 PUT
　　　　http://www.baidu.com/books/123 DELETE

2、Promise用法
2.1、非同步呼叫
非同步呼叫效果分析
　　定時任務
　　Ajax
　　事件函式
多次非同步呼叫的依賴分析
　　多次呼叫的結果順序不確定
　　非同步呼叫結果如果存在依賴需要巢狀
2.2、Promise概述
Promise是非同步程式設計的一種解決方案，從語法上講，Promise是一個物件，從它可以獲取非同步操作的訊息。
使用Promise的優點：
　　可以避免多層非同步呼叫巢狀問題（回撥地獄）
　　Promise物件提供了簡潔的API，使得控制非同步操作更加容易
2.3、Promise基本用法
例項化Promise物件，建構函式中傳遞函式，該函式中用於處理非同步任務
resolve和reject兩個引數用於處理成功和失敗的兩種情況，並通過p.then獲取處理結果

var p = new Promise(function(resolve,reject){
    //成功時呼叫resolve()
    //失敗時呼叫reject()
})
p.then(function(ret){
    //從resolve得到正常結果
},function(ret){
    //從reject得到錯誤資訊
})

2.4、基於Promise處理Ajax請求
處理原生Ajax

function queryData(){
    return new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange 
 
= function(){
            if(xhr.readyState != 4) return;
            if(xhr.status == 200){
                resolve(xhr.responseText)
            }else{
                reject('出錯了');
            }
        }
        xhr.open('get','/data');
        xhr.send(null);
    })
}

傳送多次Ajax請求

queryData()
.then(function(data){
    return queryData();
})
.then(function(data){
    return queryData();
})
.then(function(data){
    return queryData();
})

2.5、then引數中的函式返回值
返回Promise例項物件
　　返回的該例項物件會呼叫下一個then
返回普通值
　　返回的普通值會直接傳遞給下一個then，通過then引數中函式的引數接收該值
2.6、Promise常用的API
例項方法
　　p.then() 得到非同步任務的正確結果
　　p.catch() 獲取異常資訊
　　p.finally() 成功與否都會執行（尚且不是正式標準）
　　語法結構：

queryData()
.then(function(data){
    console.log(data);
})
.catch(function(data){
    console.log(data);
})
.finally(function(){
    console.log('finished');
})