聊聊 Vue 中 axios 的封装

axios 是 Vue 官方推荐的一个 HTTP 库，用 axios 官方简介来介绍它，就是：

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

作为一个优秀的 HTTP 库，axios 打败了曾经由 Vue 官方团队维护的 vue-resource，获得了 Vue 作者尤小右的大力推荐，成为了 Vue 项目中 HTTP 库的最佳选择。

虽然，axios 是个优秀的 HTTP 库，但是，直接在项目中使用并不是那么方便，所以，我们需要对其进行一定程度上的配置封装，减少重复代码，方便调用。下面，我们就来聊聊 Vue 中 axios 的封装。

安装iterm2

• 官网下载 下载完，拖到应用程序里即可

iterm2配置配色方案

• 下载复制文件内容

• 保存为文件SolarizedDarkHigherContrast.itermcolors，双击安装

• 打开 iTerm2 终端，依次在菜单栏选择：iTerm2 –> Preferences –> Profiles –> Colors –> Colors Presets –> SolarizedDarkHigherContrast

恢复iterm2默认设置

1

defaults delete com.googlecode.iterm2

前置校验

1
2
3
4
5
6
7
8
9

# 1、默认已安装 Homebrew、iTerm2
# 2、查看是否安装了zsh，查看是否返回 /usr/bin/zsh
cat /etc/shells
# 若未安装
brew install zsh

# iTerm2 启动项配置
chsh -s /bin/zsh      # 设置为zsh
chsh -s /bin/bash     # 设置为bash（Mac自带默认）

Web Notifications 技术使页面可以发出通知，通知将被显示在页面之外的系统层面上。能够为用户提供更好的体验，即使用户忙于其他工作时也可以收到来自页面的消息通知，例如一个新邮件的提醒，或者一个在线聊天室收到的消息提醒等等。

PS：除了IE外，各大现代浏览器都对这个桌面推送有了基本的支持。

js 二进制与位运算

生活中，我们经常用到的是以十进制为单位，进位是满 10 进 1，而计算机是用二进制，那么就是满 2 进 1 喽，为什么采用二进制呢？简单说下，Ta的由来其实是根据电路的开关闭合，电路只有 0 和 1，具体的详情这里不多做解释了，可以自行百科^_^。javascript 采用有符号 32 位的 2 进制，可表示 4294967295 个整数(含正负)，范围是 -2147483648(2 的 32 次方) ~ 2147483647。

带符号二进制基本规则与几个概念

在计算机中规定最高位是符号位，0 为正，1 为负。正数表示是原码，负数是原码的补码。

原码

除去符号位，其他 32 位都为正。

例：00000000000000000000000000001010 原码 00000000000000000000000000001010。

反码

所谓反码，除符号位外，其他位 0 变 1，1 变 0。 例：1010 反码 1101

补码

所谓补码，就像是小学学过的 10 进制补数，举个例子就很好理解，3 的补数是多少？是 7。4 的补数是 6，补数就是 10 减去这个数。在二进制的补码就是相加等于 0，互为相反数。

• 0 的补码 0 的原码、反码、补码均为 0
• 正数的补码 原码
• 负数的补码 原码除符号位外的所有位取反+1。如何推出来的，看了一篇文章，挺有意思。点击查看

一. package.json 解读

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

{
	"name": "hello world", // 项目名称
	"version": "0.0.1", // 版本号：大版本.次要版本.小版本
	"author": "张三",
	"description": "第一个node.js程序",
	"keywords":["node.js","javascript"], // 关键词，有助于 npm search 发现
	"repository": { // 存储库，指定代码所在位置（如果git repo在GitHub上，那么该npm docs 命令将能够找到文件位置。）
		"type": "git",
		"url": "https://path/to/url"
	},
	"license":"MIT", // 指定包许可证，详细可见[SPDX许可证ID的完整列表](https://spdx.org/licenses/)
	"engines": {"node": "0.10.x"}, // 指定该模块运行的平台，可以指定 node 版本、npm 版本等
	"bugs":{"url":"http://path/to/bug","email":"bug@example.com"}, // 项目问题跟踪器的URL和应报告问题的电子邮件地址。
	"contributors":[{"name":"李四","email":"lisi@example.com"}],
    "bin": { // 指定内部命令对应的可执行文件的位置，在 scripts 中就可以简写
    	"webpack": "./bin/webpack.js"
  	},
    "main": "lib/webpack.js", // 指定加载的模块入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
    "config" : { "port" : "8080" }, // 用于添加命令行的环境变量（用户在运行 scripts 命令时，就默认在脚本文件中添加 process.env.npm_package_config_port，用户可以通过 npm config set foo:port 80 命令更改这个值）
	"scripts": { // 指定运行脚本的 npm 命令行缩写
		"start": "node index.js"
	},
    "peerDependencies": { // 指定项目安装必须一起安装的模块及其版本号，（注意：从 npm 3.0 开始，peerDependencies不会再默认安装）
    	"chai": "1.x"
  	},
	"dependencies": { // 指定项目运行所依赖的模块
		"express": "latest",
		"mongoose": "~3.8.3",
		"handlebars-runtime": "~1.0.12",
		"express3-handlebars": "~0.5.0",
		"MD5": "~1.2.0"
	},
	"devDependencies": { // 指定项目开发所需要的模块
		"bower": "~1.2.8",
		"grunt": "~0.4.1",
		"grunt-contrib-concat": "~0.3.0",
		"grunt-contrib-jshint": "~0.7.2",
		"grunt-contrib-uglify": "~0.2.7",
		"grunt-contrib-clean": "~0.5.0",
		"browserify": "2.36.1",
		"grunt-browserify": "~1.3.0",
	},
    "browser": { // 指定该模板供浏览器使用的版本
  		"tipso": "./node_modules/tipso/src/tipso.js"
	},
    "preferGlobal": true, // 表示当用户不将该模块安装为全局模块时（即不用–global参数），要不要显示警告，表示该模块的本意就是安装为全局模块。
}

package.json 在 node 和 npm 环节都要使用，node 在调用 require 的时候去查找模块，会按照一个次序去查找，package.json 会是查找中的一个环节。npm 用的就比较多，其中的 dependencies 字段就是本模块的依赖的模块清单。每次npm update的时候，npm会自动的把依赖到的模块也下载下来。当npm install 本模块的时候，会把这里提到的模块都一起下载下来。通过package.json,就可以管理好模块的依赖关系。

关于更多规范，请看官方npm-package.json

场景 – mac vscode不能安装更新

Could not create temporary directory: Permission denied

原因分析

mac下/Users/username/Library/Caches/用户文件不一样，root和username

导致

drwxr-xr-x 6 username staff 204B Jan 17 20:33 com.microsoft.VSCode drwxr–r– 2 root staff 68B Dec 17 13:51 com.microsoft.VSCode.ShipIt

解决方案

1
2
3
4
5
6
7
8
9
10

// 1. 关闭vscode

// 2. 这一步是需要输入密码的
sudo chown $USER ~/Library/Caches/com.microsoft.VSCode.ShipIt/ 

// 3. 这一步是不需要输入密码的, 如果不进行第一步，第二步会报错
sudo chown $USER ~/Library/Caches/com.microsoft.VSCode.ShipIt/*

// 4. 更新xattr
xattr -dr com.apple.quarantine /Applications/Visual\ Studio\ Code.app

重新安装更新 完成😁

Mac版本下的Chrome，双击html文件打不开

原因其实是因为在Mac OS系统下，在Finder(访达)中做任何操作，文件都会不可避免的被附加上一个特有的拓展属性(extend attributes)，可以通过终端命令ls -l查看，这些文件通常都会有@作为标记，因此，由于产品的原型是由Axure来制作的，然后导出了tar的压缩包，因此我们解压之后，通常都不能直接在浏览器打开！

怎么解决这种问题呢？

我们可以清除掉这个属性(extend attributes)！

1. 可以针对单个文件做清除操作（filename就是要文件名，例如：index.html）

   1	xattr -c filename

2. 也可以针对整个目录做清除操作（directory就是目录名，例如：content）

   1	xattr -rc directory

重启电池smc

1
2
3
4
5
6
7
8

将 Mac 关机。
在内建键盘上，按住以下所有按键。Mac 可能会开机。
键盘左侧的 Control 
键盘左侧的 Option (Alt) 
键盘右侧的 Shift 
按住全部三个按键 7 秒钟，然后在不松开按键的情况下按住电源按钮。如果 Mac 处于开机状态，它将在您按住这些按键时关机。
继续按住全部四个按键 7 秒钟，然后松开这些按键。
等待几秒钟，然后按下电源按钮以将 Mac 开机。