promise是什么？ 1、主要用于异步计算 2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 3、可以在对象之间传递和操作promise，帮助我们处理队列 为什么会有promise？ 为了避免界面冻结（任务） 同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单，这么小的动作，服务员却要你等到别人的一个大动作完成之后，才能再来招呼你，这个便是同步的问题：也就是“顺序交付的工作1234，必须按照1234的顺序完成”。 异步：则是将耗时很长的A交付的工作交给系统之后，就去继续做B交付的工作，。等到系统完成了前面的工作之后，再通过回调或者事件，继续做A剩下的工作。 AB工作的完成顺序，和交付他们的时间顺序无关，所以叫“异步”。 异步操作的常见语法 事件监听
|
1 2 3 4 5 6 |
document.getElementById('#start').addEventListener('click', start, false); function start() { // 响应事件，进行相应的操作 } // jquery on 监听 $('#start').on('click', start) |
回调
|
1 2 3 4 5 6 7 8 9 10 11 |
// 比较常见的有ajax $.ajax('http://www.wyunfei.com/', { success (res) { // 这里可以监听res返回的数据做回调逻辑的处理 } }) // 或者在页面加载完毕后回调 $(function() { // 页面结构加载完成，做回调逻辑处理 }) |
有了nodeJS之后…对异步的依赖进一步加剧了 大家都知道在nodeJS出来之前PHP、Java、python等后台语言已经很成熟了，nodejs要想能够有自己的一片天，那就得拿出点自己的绝活： 无阻塞高并发，是nodeJS的招牌，要达到无阻塞高并发异步是其基本保障 举例：查询数据从数据库，PHP第一个任务查询数据，后面有了新任务，那么后面任务会被挂起排队；而nodeJS是第一个任务挂起交给数据库去跑，然后去接待第二个任务交给对应的系统组件去处理挂起，接着去接待第三个任务…那这样子的处理必然要依赖于异步操作 异步回调的问题： 之前处理异步是通过纯粹的回调函数的形式进行处理 很容易进入到回调地狱中，剥夺了函数return的能力 问题可以解决，但是难以读懂，维护困难 稍有不慎就会踏入回调地狱 – 嵌套层次深，不好维护 回调地狱 一般情况我们一次性调用API就可以完成请求。 有些情况需要多次调用服务器API，就会形成一个链式调用，比如为了完成一个功能，我们需要调用API1、API2、API3，依次按照顺序进行调用，这个时候就会出现回调地狱的问题 promise promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外） 并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据 代码风格，容易理解，便于维护 多个异步等待合并便于解决 promise详解
|
1 2 3 4 5 6 7 8 9 10 |
new Promise( function (resolve, reject) { // 一段耗时的异步操作 resolve('成功') // 数据处理完成 // reject('失败') // 数据处理出错 } ).then( (res) => {console.log(res)}, // 成功 (err) => {console.log(err)} // 失败 ) |
resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去； reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。 promise有三个状态： 1、pending[待定]初始状态 2、fulfilled[实现]操作成功 3、rejected[被否决]操作失败 当promise状态发生改变，就会触发then()里的响应函数处理后续步骤； promise状态一经改变，不会再变。 Promise对象的状态改变，只有两种可能： 从pending变为fulfilled 从pending变为rejected。 这两种情况只要发生，状态就凝固了，不会再变了。 最简单示例：
|
1 2 3 4 5 6 7 |
new Promise(resolve => { setTimeout(() => { resolve('hello') }, 2000) }).then(res => { console.log(res) }) |
分两次，顺序执行
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
new Promise(resolve => { setTimeout(() => { resolve('hello') }, 2000) }).then(val => { console.log(val) // 参数val = 'hello' return new Promise(resolve => { setTimeout(() => { resolve('world') }, 2000) }) }).then(val => { console.log(val) // 参数val = 'world' }) |
promise完成后then()
|
1 2 3 4 5 6 7 8 9 10 |
let pro = new Promise(resolve => { setTimeout(() => { resolve('hello world') }, 2000) }) setTimeout(() => { pro.then(value => { console.log(value) // hello world }) }, 2000) |
结论：promise作为队列最为重要的特性，我们在任何一个地方生成了一个promise队列之后，我们可以把他作为一个变量传递到其他地方。 假如在.then()的函数里面不返回新的promise，会怎样？ .then() 1、接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败） 2、.then()返回一个新的Promise实例，所以它可以链式调用 3、当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行 4、状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null； 5、如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行 6、如果返回其他任何值，则会立即执行下一级.then() .then()里面有.then()的情况 1、因为.then()返回的还是Promise实例 2、会等里面的then()执行完，再执行外面的 then嵌套 对于我们来说，此时最好将其展开，也是一样的结果，而且会更好读： 展开增加可读性 错误处理 Promise会自动捕获内部异常，并交给rejected响应函数处理。 第一种错误处理 第一种错误处理 第二种错误处理 第二种错误处理 错误处理两种做法： 第一种：reject('错误信息').then(() […]
View Details|
1 2 3 4 5 6 7 8 |
{ // 进行路由配置,规定'/'引入到home组件 path: '/', component: resolve => require(['../pages/home.vue'], resolve), meta: { title: 'home' } }] |
这是异步加载组件，当你访问 / ，才会加载 home.vue。 路由懒加载的一种写法 也可以用import
|
1 2 3 4 5 6 7 |
{ path: '/', component: () => import('../pages/home.vue'), meta: { title: 'home' } } |
vue-router中，require代替import解决vue项目首页加载时间过久的问题 vue的路由配置文件(routers.js)，一般使用import引入的写法，当项目打包时路由里的所有component都会打包在一个js中，在项目刚进入首页的时候，就会加载所有的组件，所以导致首页加载较慢， 而用require会将component分别打包成不同的js，按需加载，访问此路由时才会加载这个js，所以就避免进入首页时加载内容过多。 require: 运行时调用，理论上可以运用在代码的任何地方， import：编译时调用，必须放在文件开头 如果使用import方式，还需要安装一个插件 https://blog.csdn.net/hong10086/article/details/89684772 作者：凤箫之舞 链接：https://www.jianshu.com/p/487a600824af 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
View Details