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值，不然会报警告