如何添加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, 最终后台接收到二进制后再做具体处理。
例子: