ES 7 async／await Promise

如何添加SSL證書實現https請求

https://blog.csdn.net/lupengfei1009/article/details/76828190/

ES 7     async／await

async用來表示函數是異步的，定義的函數會返回一個promise對象，可使用then方法添加回調函數。

await 能夠理解爲是 async wait 的簡寫。await 必須出如今 async 函數內部，不能單獨使用。

總結起來，async/await的最基本用法就是：

1. 首先定義一個或多個普通函數，函數必須返回的是Promise對象（事實上你能夠返回其餘數據，但這就失去了a/a的威力）。Promise對象中能夠寫任意異步語句，必須有resolve()。

　　返回非Promise對象的狀況：

　　　　

　　返回爲Promise對象時：

　　　　

2. 而後定義一個async函數，函數語句就是執行那些個普通函數，注意，每一個執行語句前面都加上await關鍵字（async函數的內部必定會有await關鍵字）。async表示函數裏有異步操做，await表示緊跟在後面的表達式須要等待結果。（await後面也能夠跟原始類型，但沒意義。）

3. 執行這個async函數便可。async函數的返回值是Promise對象，你能夠用Promise對象的.then()方法指定下一步的操做。

　　async function demo01() { 　　return 123; 　　} 　　demo01().then(val => { 　　 console.log(val);// 123 　　}); 　　若 async 定義的函數有返回值，return 123;至關於Promise.resolve(123),沒有聲明式的 return則至關於執行了Promise.resolve();
Generator函數的寫法：

Generator函數寫法

　　

　　重點注意Generator函數的執行必須靠執行器（it.next()）

Promises寫法

　　

須要錯誤處理的狀況：

　　

　　　注意：由於在a/a領域，已經有.then和.catch來負責錯誤分支，就根本不必引入try {} catch(e) {}的寫法，這種寫法徒增代碼複雜度

下面是捕捉錯誤比較全能的辦法，出錯了依然能夠繼續往下執行：

　　

參考：做者：microkof

　　　連接：https://www.jianshu.com/p/8d73e187b9e1

 

 

 

 

 

 

番外！！！：

　　業務是這樣的，我有三個異步請求須要發送，相互沒有關聯，只是須要當請求都結束後將界面的 loading 清除掉便可。警戒寫成阻塞方式的同步：

錯誤示範：

function sleep(second) {

return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('request done! ' + Math.random());
}, second);
})
}

async function bugDemo() {
await sleep(1000);
await sleep(1000);
await sleep(1000);
console.log('clear the loading~');
}

bugDemo();

loading 確實是等待請求都結束完才清除的。可是你認真的觀察下瀏覽器的 timeline 請求是一個結束後再發另外一個的（若觀察效果請發真實的 ajax 請求）
那麼，正常的處理是怎樣的呢？

正確示範：

async function correctDemo() {
let p1 = sleep(1000);
let p2 = sleep(1000);
let p3 = sleep(1000);
await Promise.all([p1, p2, p3]);
console.log('clear the loading~');
}
correctDemo();// clear the loading~

async 函數的實現原理，僅做記錄：

注意：

await必須在async函數的上下文中的，放在forEach裏面套箭頭函數裏是不行的，會報錯！




後續的學習加深理解例子：

var func = function() {
return new Promise((resolve, reject) => {
if(false){
resolve('返回值');
}else{
reject('錯誤');
}
})
}
async function asyncFunc(){
await func()
}
asyncFunc().then(function(e){
console.log(111);
console.log(e);
},function(e){
console.log(222);
console.log(e)
return new Promise((resolve, reject) => {
if(false){
resolve('222返回值');
}else{
reject('222錯誤');
}
})
}).then(function(e){
console.log(333);
console.log(e);
},function(e){
console.log(444);
console.log(e)
})
asyncFunc().catch(function(e){
console.log(e)
})

 

222
錯誤
錯誤
444
222錯誤

 

<!--------------------------------------------------------------->

 

前端文件上傳原理

前端網頁文件上傳通常使用 <input type="file" />來實現。

在 HTML 文檔中 <input type="file" />標籤每出現一次，一個 FileUpload 對象就會被建立。
該標籤包含一個文本輸入字段，用來輸入文件名，還有一個按鈕，用來打開文件選擇對話框以便圖形化選擇文件,該標籤的 value屬性保存了用戶指定的文件的名稱。
多選：標籤能夠經過添加 multiple 屬性來支持多選；若是選擇了多個文件, 這個值表示第一個被選擇的文件路徑. JavaScript 能夠經過 Input 的 FileList 屬性獲取到其餘的文件路徑.
文件信息：能夠經過 input.files 屬性返回 — 返回值是一個 FileList 對象,這個對象是一個包含了許多 File 文件的列表，列表包含圖片的name，type，size等屬性。
限制文件類型：你可使用 input 的 accept 屬性，accept 屬性接受一個逗號分隔的 MIME 類型字符串。如: accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — PNG/JPEG
選擇文件會觸發input的onchange事件;
上傳：上傳文件前 使用FileReader對象讀取指定file的文件，並將文件轉換爲二進制字符串, 並將xhr對象, overrideMimeType 屬性設置爲text/plain; charset=x-user-defined-binary, 最終後臺接收到二進制後再作具體處理。 

例子：🌰

var reader = new FileRender(); 
xhr.open(「POST」, url); 
xhr.overrideMimeType(‘text/plain; charset=x-user-defined-binary’); 
reader.onload = function(evt) { 
xhr.send(evt.target.result); 
}; 
reader.readAsBinaryString(file);

--------------------- 

做者：qq_8572777886 
來源：CSDN 
原文：https://blog.csdn.net/q857277886/article/details/79092591 
版權聲明：本文爲博主原創文章，轉載請附上博文連接！

<!--------------------------------------------------------------->

 

 

小知識：

el-table，是把 width 換成 min-width ,就支持百分比顯示啦 ！

vue使用v-for循環組件的時候須要，寫：key值，不然會報警告