前端接口請求方式一：
用法：
jQuery.ajax([settings])
$.ajax({
url:"", //請求的url地址
success:function(req){
//請求成功
},
error:function(){
//請求出錯
},
complete:function(){
//請求完成
}
});
常用可選參數：
type
類型：String
默認值: "GET")。請求方式 ("POST" 或 "GET")， 默認為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。
url
類型：String
默認值: 當前頁地址。發送請求的地址。
contentType
類型：String
默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。
默認值適合大多數情況。如果你明確地傳遞了一個 content-type 給 $.ajax() 那么它必定會發送給服務器（即使沒有數據要發送）。
常用值參考
【
application/x-www-form-urlencoded：數據被編碼為名稱/值對。這是標准的編碼格式application/json：消息主體是序列化后的 JSON 字符串
multipart/form-data： 需要在表單中進行文件上傳時，就需要使用該格式。常見的媒體格式是上傳文件之時使用的text/plain：數據以純文本形式(text/json/xml/html)進行編碼，其中不含任何控件或格式字符。】
async
類型：Boolean
默認值: true。默認設置下，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為 false。
注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。
context
類型：Object
這個對象用於設置 Ajax 相關回調函數的上下文。也就是說，讓回調函數內 this 指向這個對象（如果不設定這個參數，那么 this 就指向調用本次 AJAX 請求時傳遞的 options 參數）。比如指定一個 DOM 元素作為 context 參數，這樣就設置了 success 回調函數的上下文為這個 DOM 元素。
data
類型：String
發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'
dataType
類型：String
預期服務器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，比如 XML MIME 類型就被識別為 XML。在 1.4 中，JSON 就會生成一個 JavaScript 對象，而 script 則會執行這個腳本。隨后服務器端返回的數據會根據這個值解析后，傳遞給回調函數。可用值:
- "xml": 返回 XML 文檔，可用 jQuery 處理。
- "html": 返回純文本 HTML 信息；包含的 script 標簽會在插入 dom 時執行。
- "script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了 "cache" 參數。注意：在遠程請求時(不在同一個域下)，所有 POST 請求都將轉為 GET 請求。（因為將使用 DOM 的 script標簽來加載）
- "json": 返回 JSON 數據 。
- "jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。
- "text": 返回純文本字符串
jsonp
類型：String
在一個 jsonp 請求中重寫回調函數的名字。這個值用來替代在 "callback=?" 這種 GET 或 POST 請求中 URL 參數里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 會導致將 "onJsonPLoad=?" 傳給服務器。
前端接口請求方式二：
axios
安裝：
使用 npm：$ npm install axios
使用 bower：$ bower install axios
使用cdn：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
用法：
get請求：
// 為給定 ID 的 user 創建請求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的請求也可以這樣做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
POST請求：
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
多個並發請求：
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 兩個請求現在都執行完成
}));
前端請求方式三：
使用該技術前建議先看文檔和API: Fetch
安裝：
npm install whatwg-fetch --savenpm install es6-promise --save
import 'whatwg-fetch' import 'es6-promise'
請注意，fetch規范與jQuery.ajax()主要有兩種方式的不同，牢記：
- 當接收到一個代表錯誤的 HTTP 狀態碼時，從
fetch()返回的 Promise 不會被標記為 reject， 即使該 HTTP 響應的狀態碼是 404 或 500。相反，它會將 Promise 狀態標記為 resolve （但是會將 resolve 的返回值的ok屬性設置為 false ），僅當網絡故障時或請求被阻止時，才會標記為 reject。 - 默認情況下，
fetch不會從服務端發送或接收任何 cookies, 如果站點依賴於用戶 session，則會導致未經認證的請求（要發送 cookies，必須設置 credentials 選項）。自從2017年8月25日后，默認的credentials政策變更為same-originFirefox也在61.0b13中改變默認值
進行 fetch 請求
一個基本的 fetch請求設置起來很簡單。看看下面的代碼：
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
前端路崎修遠兮，吾將上下而求索
前端敏捷會有時，直掛雲帆濟滄海