http://bruce-xu.github.io/blogs/js/promise
![](https://box.kancloud.cn/07dd39887a2092cf6d85223b9bd25037_637x318.png)
```
Document
promise test
-->
function loadImg(src) {
var promise = new Promise(function (resolve, reject) {
var img = document.createElement('img')
img.onload = function () {
resolve(img)
}
img.onerror = function () {
reject('图片加载失败')
}
img.src = src
})
return promise
}
// var src = 'https://www.imooc.com/static/img/index/logo\_new.png'
// var result = loadImg(src)
// result.then(function (img) {
// console.log(1, img.width)
// return img
// }, function () {
// console.log('error 1')
// }).then(function (img) {
// console.log(2, img.height)
// })
// var src = 'https://www.imooc.com/static/img/index/logo\_new.png'
// var result = loadImg(src)
// result.then(function (img) {
// console.log(1, img.width)
// return img
// }).then(function (img) {
// console.log(2, img.height)
// }).catch(function (ex) {
// // 统一捕获异常
// console.log(ex)
// })
// var src1 = 'https://www.imooc.com/static/img/index/logo\_new.png'
// var result1 = loadImg(src1)
// var src2 = 'https://img1.mukewang.com/545862fe00017c2602200220-100-100.jpg'
// var result2 = loadImg(src2)
// result1.then(function (img1) {
// console.log('第一个图片加载完成', img1.width)
// return result2 // 重要!!!
// }).then(function (img2) {
// console.log('第二个图片加载完成', img2.width)
// }).catch(function (ex) {
// console.log(ex)
// })
var src1 = 'https://www.imooc.com/static/img/index/logo\_new.png'
var result1 = loadImg(src1)
var src2 = 'https://img1.mukewang.com/545862fe00017c2602200220-100-100.jpg'
var result2 = loadImg(src2)
Promise.all(\[result1, result2\]).then(function (datas) {
console.log('all', datas\[0\])
console.log('all', datas\[1\])
})
Promise.race(\[result1, result2\]).then(function (data) {
console.log('race', data)
})
```
- js
- js继承
- keyCode
- 好的网站
- 零散知识点-js
- This
- 对象深拷贝和浅拷贝
- 数组方法
- 数组的深拷贝和浅拷贝
- JS 引擎的执行机制
- js中的new
- 常用正则
- 函数柯里化
- 会修改当前数组的方法
- 不会修改当前数组的方法
- 函数式编程
- 循环遍历
- 基础知识
- 异步
- js知识总结
- fileReader
- HTML
- 零散知识点
- html5新特性
- viewport
- CSS
- cursor
- css3新特性
- 水平居中
- 垂直居中
- display解析
- 块级元素和行内元素
- css技巧和方法
- 清除浮动
- Less
- Sass
- 综合
- 微信小程序
- 前端面试
- CSS-面试
- JS-面试
- js-web-api
- js知识
- MVC-面试
- jQuery与框架的区别
- 闭包
- promise
- http状态码
- cdn
- 离线存储
- 事件
- web安全
- 性能优化
- 响应式
- 服务器渲染和本地渲染
- 模板是什么?
- VUE流程
- 浏览器渲染过程
- this的指向
- new的使用
- HTML-面试
- title和alt区别
- html5元素
- h5新特性
- 图片格式
- 零散面试总结
- react
- 生命周期-react
- state
- props
- 组件通信
- 虚拟DOM
- 源码分析
- webstorm-template
- element与component区别
- 组件的理解
- JXS
- vue与react区别
- 16.8版本
- vue
- 生命周期-vue
- 实现流程
- webpack
- 概念
- 入口起点
- 出口
- loader
- 模式
- 插件
- manifest
- redux
- 介绍
- 核心概念
- 三大原则
- 基础
- action
- reducer
- store
- 数据流
- 高级
- 异步action
- 异步数据流
- middleware
- ES6阮一峰
- ...
- let
- es6箭头函数
- const
- 块级作用域
- 顶层对象的属性
- global 对象
- 变量的解构赋值
- 字符串的扩展
- promise对象
- 正则的扩展
- 数值的扩展
- Math对象的扩展
- 函数的扩展
- 数组的扩展
- 对象的扩展
- symbol
- async函数
- class的基本用法
- Class 的继承
- Set 和 Map 数据结构
- 开发工具
- 好用的软件
- chrome插件
- 其他实用工具
- 微信公众号-前端早读课
- 【第1352期】map和reduce,处理数据结构的利器
- 微信公众号-前端大全
- JS 的执行机制
- 一篇文章理解 JS 继承
- 浏览器
- 缓存
- 《Webkit技术内幕》之页面渲染过程
- 跨域
- 安全
- XSS
- 设计模式
- 发布订阅模式
- 工厂模式
- MV*模式
- 观察者模式
- react-router
- 一些小技巧
- js一些小算法
- 1.已知一个数组中的值,在另外一个数组中查找该值
- 累加器
- 数组随机
- 数组扁平化并去重排序
- Immutable
- 常用命令
- hybrid
- schema封装
- typescript