如果喜欢使用lower-level,使用标准的 fetch API. 好处是无需额外的加载一个外部资源。但没有被浏览器完全支持,需要使用polyfill。因此使用Axios的更多一些。
参考Axios的使用:
Fetch basic concepts
Fetch 的核心在于对 HTTP 接口的抽象,包括 Request,Response,Headers,Body,以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块,其他接口能够很方便的使用这些功能。
Fetch 还利用到了请求的异步特性——它是基于 Promise 的。
Using Fetch
Fetch api 提供了一个js接口,用于访问和操作HTTP管道的部分,如响应和请求。
注意
- 当接收到代表错误的HTTP state code时,从fetch()返回的Promise不会被标记为reject, 即状态码不是400/500。相反,它会将Promise状态标记为resolve,(resolve: false)。只有当网络硬件故障或请求被阻止时,才会标记为reject
- 默认,fetch不从服务器发送或接收任何cookies。要设置credentials选项。
例子:
fetch(`http://localhost:3000/api/v1/discussions/${encodeURIComponent(url)}/comments`, {
headers: {accept: 'application/json'},
method: 'post',
body: formData,
})
.then(response => response.json())
.then(comment => commit('addComment', comment))
使用了箭头函数简化:
then(function(response) {
return response.json()
})
第一个then, 把响应的结果promise对象(也是Response对象)转化为json格式。
除此之外,我们还可以根据需要把响应转化为其他格式:
• clone() - As the method implies this method creates a clone of the response.
• redirect() - This method creates a new response but with a different URL.
• arrayBuffer() - In here we return a promise that resolves with an ArrayBuffer.
• formData() - Also returns a promise but one that resolves with FormData object.
• blob() - This is one resolves with a Blob.
• text() - In this case it resolves with a string.
• json() - Lastly we have the method to that resolves the promise with JSON.
第二个then, 执行一个函数。
Headers的解释:
Fetch API 的 Headers 接口允许您对HTTP请求和响应头执行各种操作。 这些操作包括检索,设置,添加和删除。
一个Headers对象有一个header list, 开始是空的,你可以使用append("key", "value")方法添加key/value对儿。
Request.headers或者Response.headers得到Header对象。
Headers.headers()来构建一个新的Headers对象。
例子:
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/xml");
myHeaders.get("Content-Type")
// 返回'text/xml'
使用请求构建器request constructor
new Request(url, {...})可以生成fetch()方法的2个参数。
例子:
const url = ''https://randomuser.me/api'';
let data = {
name: 'Sara'
}
var request = new Request(url, {
method: 'post',
body: data,
headers: new Headers()
};
fetch(request)
.then(function() {
//...这里处理从API得到的response data
})
使用Vue CLI3创建一个项目:
介绍
基于Vue.js进行快速开发的完整系统。(包括git)
- 通过@veu/cli搭建交互的项目手脚架(甚至可以用vue ui打开网页编辑器)
- 一个运行时依赖(@vue/cli-service):
- 可升级
- 基于webpack构建
- 可通过插件扩展
- 丰富的官方插件集合,集成前端生态中的最好工具
- 一套完全图形化的创建和管理Vue.js项目的用户界面vue ui
该系统的组件
CLI
@vue/cli是一个npm包,提供vue命令。它通过vue create来快速创建新项目的手脚架。
可以用vue serve进行快速原型开发。
可以通过vue ui命令打开一套图形化界面管理你的所有项目。
CLI服务
@vue/cli-service是一个开发环境依赖. npm包。局部安装在每个@vue/cli创建的项目中。
vue-cli-service命令,提供 serve
、build
和 inspect
CLI插件
提供如Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。
Vue CLI 插件的名字以 @vue/cli-plugin-
(内建插件) 或 vue-cli-plugin-
安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
#用vue --version查看版本
Node版本要求:
需要Node.js 8.9以上版本。 可以使用nvm(node version manger)
创建一个项目:
vue create hello-world
#和CLI2版本的命令不一样
CLI服务的命令
启动开发服务器
vue-cli-service serve
命令(英文叫做Binary)会启动一个开发服务器(dev server) (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
npx vue-cli-service serve
建立生成环境production(不是很理解!)
vue-cli-service build
会在 dist/
目录产生一个可用于生产环境的包(a production-ready bundle),带有 JS/CSS/HTML 的压缩。
查看命令帮助
#查看帮助文档
npx vue-cli-service help
#详细命令:
npx vue-cli-service help [command]
插件和Preset
Vue CLI 使用了一套基于插件的架构。
查看package.json。所有插件都是以@vue/cli-plugin-开头的。
⚠️vue ui可以安装和管理插件。
在现有项目上安装插件
//使用vue add
vue add @vue/eslint
vue add router
vue add vuex
Preset
一个包含创建新项目所需预定义选项和插件的 JSON 对象,让用户无需在命令提示中选择它们。
在 vue create
过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc
)。
使用Vue cli3搭建一个用Fetch Api的组件
错误❌:
[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
解决:
<li v-for="item in filtered" :key="item">
改成:
:key="item.id"
分析:
key
的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
看一下正则表达式插值的知识点。
nvm(node version manger)
Node版本管理
nvm是一个简单的bash script来管理多个活动的node.js版本.
安装nvm:
具体看git:https://github.com/creationix/nvm , 有很多note提示和⚠️
确认安装:
command -v nvm
屏幕打印nvm,表示成功。
显示电脑上的版本:
nvm ls
安装新版本并使用这个版本:
nvm ls-remote #显示可以用的版本
nvm install 10.00.0 #或者其他版本
nvm use node
yarn 命令集合:
- yarn help: 帮助信息。
- yarn info <package>: 显示一个包的详细信息
yarn add: 安装一个包(以及任何它依赖的包)。
- yarn init: 初始化包;
- yarn install:用于安装一个项目的所有依赖。常见的使用场景是在你刚checkout 一份项目代码之后,或者需要使用其他开发者新增的项目依赖的时候。在本地node_modules目录安装package.json中列出的所有依赖。
- yarn remove: 从当前包里移除一个未使用的包。
- yarn list:
- yarn global: 这是一个前缀,可以用于add, bin, list, remove,upgrade命令。区别是用一个全局目录来存储包(使用which <filename>命令查看存储的位置)
- yarn check: 验证当前项目
package.json
yarn add详解:
一个包是一个包含代码的文件夹和一个描述包内容的package.json文件。
如果你想要使用其他包,首先要将它加入依赖列表:执行yarn add [package-name],来为项目安装所需要的包。
同时这个命令会更新package.json和yarn.lock文件,以便使本项目的其他开发者可以使用yarn或者yarn install来安装相同的依赖。