手写 promise 封装 axios
其实, axios 本身就是基于 Promise 进行封装的, 我们之所以进行二次封装, 主要是为了能够对错误信息进行一个集中的处理, 根据不同的错误信息, 需要给用户不同的提示, 以便于给用户一个良好的操作体验.
封装方法有很多种, 基于 class 类的, 基于构造函数的, 也可以直接封装一个函数.
具体按照个人习惯, 最主要的还是要对后端给我们返回的状态码或者状态值进行判断, 如果成功, 则直接 resolve 数据, 否则的话, 对不同的错误信息做出不同的操作即可.
封装方法
- /**
- * @function request 二次封装 Ajax 请求函数
- * @param {Object} options 对象形式配置参数
- * @param {String} options.url 请求路径
- * @param {String} [options.method=GET] 请求方式
- * @param {Object|String} [options.params] GET 请求携带数据
- * @param {Object|FormData} [options.data] POST 请求携带数据
- * @param {Object} [options.headers] 请求头
- * @return {Promise}
- * */
- function request(options) {
- const defaultOptions = {
- method: 'GET',
- };
- options = Object.assign(defaultOptions, options);
- return new Promise((resolve, reject) => {
- axios(options).then(res => {
- // 此处对后台返回的状态值进行二次判断, 可能是状态码, 也可能是状态值
- // 根据实际项目不同, 后端人员不同, 返回的值不同
- if(res.data.success) {
- resolve(res.data);
- // 否则的话是错误状态, 后端人员会给一个错误信息
- // 我们需要针对不同的错误执行不同的操作, 给用户不同的提示
- }else if(res.data.msg) {
- // 执行操作
- }
- }).catch(err => {
- // 如果错误的话, 直接返回错误
- // 也可以对错误进行一些处理
- reject(err);
- })
- })
- }
调用方法
- request({
- url: 'http://www.haochenguang.cn',
- method: 'get',
- }).then(res => {
- // 接收返回成功的结果
- }).catch(err => {
- // 接收返回失败的结果
- })
详述前端性能优化的手段
前端优化的目的
优化可以使页面加载的更快, 用户体验更加流畅, 提升用户体验度.
优化可以有效的减少带宽, 减少 HTTP 请求, 减轻服务器压力, 节省资源.
优化方式
从 HTTP 请求方面优化
合并压缩 CSS 样式;
合并压缩 JS 文件;
使用 Sprites 雪碧图;
使用 base64 格式的图片, 将图片内嵌到页面中;
图片懒加载
JS 文件放置在 body 底部或者异步加载;
对 JS 文件实行懒加载;
将 CSS 文件放置在 head 内, 保证用户体验;
避免多页面之间的重复资源引用;
减少不必要的 HTTP 跳转或重定向;
使用 CDN 来代替本地静态资源;
使用 gzip 压缩.
从代码方面优化
避免在 document 上直接进行频繁的 DOM 操作
使用 classname 代替大量的内联样式修改
对于复杂的 UI 元素, 设置 position 为 absolute 或 fixed
尽量使用 CSS 动画
使用 requestAnimationFrame 代替 setInterval 操作
适当使用 canvas
尽量减少 CSS 表达式的使用
使用事件代理
避免图片或者 frame 使用空 src
在 CSS 属性为 0 时, 去掉单位
禁止图像缩放
正确的 CSS 前缀的使用
移除空的 CSS 规则
对于 CSS 中可继承的属性, 如 font-size, 尽量使用继承, 少一点设置
缩短 CSS 选择器, 多使用伪元素等帮助定位
image
更加详细的优化解析:
前端性能优化常用总结
前端性能优化方法总结
浏览器输入网址回车发生了什么
简洁回答:
DNS 解析: 将域名解析成 IP 地址
TCP 连接: TCP 三次握手
发送 HTTP 请求
服务器处理请求并返回 HTTP 报文
浏览器解析渲染页面
断开连接: TCP 四次挥手
关于浏览器输入网址回车后发生了什么这两篇文章写的特别好, 我就不献丑了.
从 URL 输入到页面展现到底发生什么?
从输入 url 到页面展示到底发生了什么 @小四
列举你知道的浏览器内核
浏览器 | 内核 |
---|---|
Google chrome 谷歌浏览器 | Blink 内核 |
Firefox 火狐浏览器 | Gecko 内核 |
IE 浏览器 | Trident 内核 |
Opera 欧朋浏览器 | Blink 内核 |
Safari 苹果浏览器 | webkit 内核 |
如果本文对您有帮助, 可以看看本人的其他文章:
前端常见面试题 (十七)@郝晨光
GitHub 创建项目并添加协作者 @郝晨光
TypeScript 入门学习 @郝晨光
结言
感谢您的查阅, 本文由郝晨光整理并总结, 代码冗余或者有错误的地方望不吝赐教; 菜鸟一枚, 请多关照
来源: http://www.jianshu.com/p/cc324639e260