JS技术总结2

1）require和require.async的区别
require方法的加载方式是提前并行加载，并不是同步加载，看似同步，但还会往下执行，它不会因为一个文件而阻塞其他文件的加载。require.async方法的加载方式是异步按需加载，异步回调执行。

2、加载阶段不同
require的文件在代码分析期加载，require. async的文件在代码执行期加载。
3、执行时间不同
require的文件预加载完成但不执行，require. async的文件加载完后立即执行。


补充：amd-requirejs
cmd-seajs
require.js在加载的时候会检查data-main属性，当加载完毕，data-main属性规定的js文件会第一个被require.js加载并执行。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。
CommonJS 之 require（不用define）
require 命令的基本功能是，读入并执行一个 js 文件，然后返回该模块的 exports 对象。如果没有发现指定模块，会报错。
第一次加载某个模块时，Node.js 会缓存该模块。以后再加载该模块，就直接从缓存取出该模块的 module.exports 属性返回了。
// a.js var name = 'morrain'
var age = 18
exports.name = name
exports.getAge = function(){ return age } // b.js
var a = require('a.js') console.log(a.name) // 'morrain'
a.name = 'rename'
var b = require('a.js') console.log(b.name) // 'rename'

2）async await promise try...catch

async函数是Generator函数的语法糖，将Generator的星号换成async 将yield换成await

async函数是Generator函数的语法糖，将Generator的星号换成async 将yield换成await

Generator是一个状态机，封装了多个内部状态，执行 Generator 函数会返回一个遍历器对象，返回的遍历器对象，可以使用next依次遍历 Generator 函数内部的每一个状态。Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。Generator 函数的执行必须靠执行器。
async函数比Generator函数更好用

自带执行器，执行起来，跟调用普通函数一样
async和await 语义更清晰，async表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果
await后面啥都可以跟，可以是Promise 也可以是对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）
异步等待需要写成promise
async函数的 返回值是 Promise
正常情况下，await命令是个Promise对象，如果不是 会被转成一个 立即 resolved的对象
async函数完全可以看作多个异步操作，包装成的一个 Promise 对象（因为await 函数返回的是Promise对象），而await命令就是内部then命令的语法糖。

然而，然而，我们没写错误处理。

await返回值不是promise，而是处理的是promise,所以 c=await 1 ;c.then()不行

 

function fun() {
return new Promise((resolve, reject) => {
resolve('模拟axios')
})
}
function test() {
return fun()
.then(res => {
console.log('1,',res)
return 1
}).then(res => {
console.log('2,',res)
return 2
}).then(res => {
console.log('3,',res)
return 3
}).catch(err=>{
console.log('#err',err)
})
};test()

必须在then中return 才有效果
Promise 多个Then连续使用
方案一:直接返回值
如上

方案二:返回promise作为结果
.then(res => {
console.log('3,',res)
return new Promise((resolve,reject)=>{ resolve(res)})
或者return Promise.resolve(res);
}).then


return 不同的值的：非promose普通值，promise

使用vue生命周期钩子异步

async mounted 是 Vue 2.6 版本新增的钩子函数，它是 mounted 的异步版本，在页面渲染完成后执行。async mounted 会等待所有的异步更新队列执行完毕后再执行，因此可以确保在 async mounted 中使用的数据是最新的。
在vue中我们经常会有这种需求:
先说注意点:
1钩子函数只会在指定时间执行(Vue生命周期),使用延时器等是不会影响周期执行的
2钩子函数里使用async,await, 后面只能跟promise,否则加async,awiat没有意义
3我们常用的钩子函数 created、mounted 如果加了async,await,想要同步执行代码,代码必须放在同一个钩子函数里面

●钩子函数只会在指定时间执行(Vue生命周期),使用延时器等是不会影响周期执行的
async created() {
await setTimeout(() => {
console.log(1);
}, 100);
console.log(2);
},
async mounted() {
await setTimeout(() => {
console.log(3);
}, 100);
console.log(4);
}
// 输出结果: 2 4 1 3
// 结论: 所以await 加给setTimeout是没有生效的,延时器并没有影响生命周期执行

钩子函数里使用async,await, 后面只能跟promise,否则加async,awiat没有意义
●// 根据上面代码看出, await 后面加延时器等其他类似需要延迟执行的函数是没用的
// 然而await 后面加同步代码又多此一举
// 而其实async,awiat是专门为了解决promise回调函数多层嵌套的问题
async created() {
await this.userData(); // 这个函数负责发请求获取数据,axios就是使用了promise
//拿到userType 判断用户不是代理人展示不同信息
if(this.userType==1){
this.isAgent=true;
}
}
// 结论: 这样写该周期函数下面的代码是会等待请求回来再执行的这样写是没问题的! 但仅仅限该周期函数!
我们常用的钩子函数 created、mounted 如果加了async,await,想要同步执行代码,代码必须放在同一个钩子函数里面
data() {
return {
name: ''
}
},
async created() {
// this.userInfo() 发送请求获取数据,然后赋值给this.name ---- this.name = res.data.name
await this.userInfo()
...
},
mounted() {
console.log(this.name) // 打印为''
}

// 结论: 不要以为mounted就一定比created后执行, 因为created加了async,await
// mounted函数懒得等他伺候promise 就先执行了
// 所以你在mounted里面不一定能拿到this.