ES6,promise發起ajax請求
promise
所謂Promise，簡單說就是一個容器，裡面儲存著某個未來才會結束的事件（通常是一個非同步操作）的結果。從語法上說，Promise 是一個物件，從它可以獲取非同步操作的訊息。Promise 提供統一的 API，各種非同步操作都可以用同樣的方法進行處理。
感覺跟java的Future類很像啊，有木有！
我們可以通過Promise的建構函式來建立Promise物件，並在內部封裝一個非同步執行的結果。
語法：
const promise = new Promise(function(resolve, reject) { // ... 執行非同步操作 if (/* 非同步操作成功 */){ resolve(value);// 呼叫resolve，代表Promise將返回成功的結果 } else { reject(error);// 呼叫reject，代表Promise會返回失敗結果 } });
這樣，在promise中就封裝了一段非同步執行的結果。
如果我們想要等待非同步執行完成，做一些事情，我們可以通過promise的then方法來實現,語法：
promise.then(function(value){
// 非同步執行成功後的回撥
});如果想要處理promise非同步執行失敗的事件，還可以跟上catch：
promise.then(function(value){ // 非同步執行成功後的回撥 }).catch(function(error){ // 非同步執行失敗後的回撥 })
示例 這段程式碼可以直接使用連結正常需要自己引入jquery：
<html> <!--網頁頭標記--> <head> <!-- 網頁名 --> <title>promise測試</title> <!-- 設定編碼字符集根據編碼工具的格式變化 meta新增到head標記裡面--> <meta charset="UTF-8"> </head> <body> <script type="text/javascript" src="jquery.min.js"></script> <script> const promise = new Promise(function (resolve, reject) { // ... 執行非同步操作 $.ajax({ type: "GET", url: "https://www.easy-mock.com/mock/5bf27535a733fb71407cf664/tensquare_bsl/test", dataType: "json", success: function (response) { //200 為正常 如果要測試失敗可以自己除錯 if (response.code == 200) { resolve(response); // 呼叫resolve，代表Promise將返回成功的結果 } else { reject(response); // 呼叫reject，代表Promise會返回失敗結果 } } }) }) //成功 promise.then(response => { alert(`成功:${response.message}`) console.log(`成功:${response.message}`) //失敗 }).catch(response => { alert(`失敗:${response.message}`) console.log(`失敗:${response.message}`) }) </script> </body> </html>
結果：
成功
失敗:
上面是非同步方式有時候我們會需要同步執行某段程式碼:
<html>
<!--網頁頭標記-->
<head>
<!-- 網頁名 -->
<title>promise測試</title>
<!-- 設定編碼字符集根據編碼工具的格式變化 meta新增到head標記裡面-->
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
const promise = new Promise(function (resolve, reject) {
// ... 執行非同步操作
$.ajax({
type: "GET",
url: "https://www.easy-mock.com/mock/5bf27535a733fb71407cf664/tensquare_bsl/test",
dataType: "json",
success: function (response) {
//200 為正常 如果要測試失敗可以自己除錯
if (response.code == 200) {
resolve(response); // 呼叫resolve，代表Promise將返回成功的結果
} else {
reject(response); // 呼叫reject，代表Promise會返回失敗結果
}
}
})
})
//成功
// promise.then(response => {
// alert(`成功:${response.message}`)
// console.log(`成功:${response.message}`)
// //失敗
// }).catch(response => {
// alert(`失敗:${response.message}`)
// console.log(`失敗:${response.message}`)
// })
//同步執行上面結果
async function test() {
let result = await promise;
console.log(`同步執行:${result.message}`)
}
test();
</script>
</body>
</html>
ES6提供了Set和Map的資料結構。
Set，本質與陣列類似。不同在於Set中只能儲存不同元素，如果元素相同會被忽略。跟java很像吧。
建構函式：
// Set建構函式可以接收一個數組或空
let set = new Set();
set.add(1);// [1]
// 接收陣列
let set2 = new Set([2,3,4,5,5]);// 得到[2,3,4,5]普通方法：
set.add(1);// 新增
set.clear();// 清空
set.delete(2);// 刪除指定元素
set.has(2); // 判斷是否存在
set.keys();// 返回所有key
set.values();// 返回所有值
set.entries();// 返回鍵值對集合
// 因為set沒有鍵值對，所有其keys、values、entries方法返回值一樣的。
set.size; // 元素個數。是屬性，不是方法。
map，本質是與Object類似的結構。不同在於，Object強制規定key只能是字串。而Map結構的key可以是任意物件。即：
-
object是 <string,object>集合
-
map是<object,object>集合
建構函式：
// map接收一個數組，陣列中的元素是鍵值對陣列
const map = new Map([
['key1','value1'],
['key2','value2'],
])
// 或者接收一個set
const set = new Set([
['key1','value1'],
['key2','value2'],
])
const map2 = new Map(set)
// 或者其它map
const map3 = new Map(map);方法：
4.3.8.模組化
4.3.8.1.什麼是模組化
模組化就是把程式碼進行拆分，方便重複利用。類似java中的導包：要使用一個包，必須先導包。
而JS中沒有包的概念，換來的是 模組。
模組功能主要由兩個命令構成：export和import。
-
export命令用於規定模組的對外介面， -
import命令用於匯入其他模組提供的功能。
4.3.8.2.export
比如我定義一個js檔案:hello.js，裡面有一個物件：
const util = {
sum(a,b){
return a + b;
}
}我可以使用export將這個物件匯出：
const util = {
sum(a,b){
return a + b;
}
}
export util;當然，也可以簡寫為：
export const util = {
sum(a,b){
return a + b;
}
}export不僅可以匯出物件，一切JS變數都可以匯出。比如：基本型別變數、函式、陣列、物件。
當要匯出多個值時，還可以簡寫。比如我有一個檔案：user.js：
var name = "jack"
var age = 21
export {name,age}
省略名稱
上面的匯出程式碼中，都明確指定了匯出的變數名，這樣其它人在匯入使用時就必須準確寫出變數名，否則就會出錯。
因此js提供了default關鍵字，可以對匯出的變數名進行省略
例如：
// 無需宣告物件的名字
export default {
sum(a,b){
return a + b;
}
}這樣，當使用者匯入時，可以任意起名字
import
使用export命令定義了模組的對外介面以後，其他 JS 檔案就可以通過import命令載入這個模組。
例如我要使用上面匯出的util：
// 匯入util
import util from 'hello.js'
// 呼叫util中的屬性
util.sum(1,2)
要批量匯入前面匯出的name和age：
import {name, age} from 'user.js'
console.log(name + " , 今年"+ age +"歲了")
但是上面的程式碼暫時無法測試，因為瀏覽器目前還不支援ES6 的匯入和匯出功能。除非藉助於工具，把ES6 的語法進行編譯降級到ES5，比如Babel-cli工具
物件擴充套件
ES6給Object拓展了許多新的方法，如：
-
keys(obj)：獲取物件的所有key形成的陣列
-
values(obj)：獲取物件的所有value形成的陣列
-
entries(obj)：獲取物件的所有key和value形成的二維陣列。格式：
[[k1,v1],[k2,v2],...] -
assian(dest, ...src) ：將多個src物件的值 拷貝到 dest中（淺拷貝）。
陣列擴充套件
ES6給陣列新增了許多方法：
-
find(callback)：把陣列中的元素逐個傳遞給函式callback執行，如果返回true，則返回該元素
-
findIndex(callback)：與find類似，不過返回的是品牌到的元素的索引
-
includes（element）：判斷指定元素是否存在