fetch
基本特性：更加简单的数据获取方式，功能更加强大、更灵活，可以看作是xhr的升级版；基于Promise实现
使用：
<script>
fetch('接口地址').then(function(data) {
// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象
return data.text()
}).then(function(data) {
// 注意这里得到的才是真实的数据
console.log(data)
})
</script>
fetch参数
常用配置选项：
method：HTTP请求方法，默认为GET（GET、POST、PUT、DELETE）
body：HTTP的请求参数
headers：HTTP的请求头，默认为{}
<script>
fetch('http://localhost:3000/books
?id=123', { //传统url方式传参
method: 'get'
}).then(function(data) {
// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象
return data.text()
}).then(function(data) {
// 注意这里得到的才是真实的数据
console.log(data)
})
</script>
<script>
fetch('http://localhost:3000/books
/123', { //Resful url方式传参
method: 'get'
}).then(function(data) {
// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象
return data.text()
}).then(function(data) {
// 注意这里得到的才是真实的数据
console.log(data)
})
</script>
<script>
fetch('http://localhost:3000/books/123', { //Resful url方式传参
method: '
delete'
}).then(function(data) {
// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象
return data.text()
}).then(function(data) {
// 注意这里得到的才是真实的数据
console.log(data)
})
</script>
POST请求方式
传统方式：
<script>
fetch('http://localhost:3000/books', {
method: 'post',
body: 'name=lisi&pwd=123', // 传递实际的数据，即把这两个参数传递到后台
headers: { // 传递请求头
'Content-Type': '
application/x-www-form-urlencoded'
}
}).then(function(data) {
// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象
return data.text()
}).then(function(data) {
// 注意这里得到的才是真实的数据
console.log(data)
})
</script>
使用json格式
<script>
fetch('http://localhost:3000/books', {
method: 'post',
body: JSON.stringify({
uname: '张三',
pwd: '456'
}),
headers: { // 传递请求头
'Content-Type': 'application/
json'
}
}).then(function(data) {
// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象
return data.text()
}).then(function(data) {
// 注意这里得到的才是真实的数据
console.log(data)
})
</script>
PUT请求方式(和POST类似)T
<script>
fetch('http://localhost:3000/books/123', {
method: 'put',
body: JSON.stringify({
uname: '张三',
pwd: '789'
}),
headers: { // 传递请求头
'Content-Type': 'application/json'
}
}).then(function(data) {
// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象
return data.text()
}).then(function(data) {
// 注意这里得到的才是真实的数据
console.log(data)
})
</script>
fetch响应结果
<script>
fetch('接口地址').then(function(data) {
return
data.json() //使用json格式传递或接收数据
}).then(function(data) {
console.log(data) //此处返回的是data对象，可以方便的.出来他的属性，如data.uname
// 如果使用return data.text()，则返回的是一个字符串，无法.
// 但是可以通过var obj = JSON.parse(data)将它转化成data，然后再使用
})
</script>
AXIOS
axios是一个基于Promise的用于浏览器和node.js的HTTP客户端
基本特征：支持浏览器的node.js
支持promise
能拦截请求和响应
自动转换JSON数据
<script>
axios.
get('接口地址').then(function(ret) {
// 注意，data属性是固定的用法，这里data才是获取的后台的实际数据，ret是一个包含data的响应对象
console.log(ret.data)
})
</script>
axios常用API：
get：查询数据
通过URL传递参数：
<script>
axios.get('http://localhost:3000/axios
?id=123').then(function(ret) {
// 注意，data属性是固定的用法，这里data才是获取的后台的实际数据，ret是一个包含data的响应对象
console.log(ret.data)
})
</script>
使用resful的URL：
<script>
axios.get('http://localhost:3000/axios
/123').then(function(ret) {
// 注意，data属性是固定的用法，这里data才是获取的后台的实际数据，ret是一个包含data的响应对象
console.log(ret.data)
})
</script>
通过params属性来传递参数：
<script>
axios.get('http://localhost:3000/axios',
{
params: {
id: 789
}
}).then(function(ret) {
// 注意，data属性是固定的用法，这里data才是获取的后台的实际数据，ret是一个包含data的响应对象
console.log(ret.data)
})
</script>
post：添加数据
<script>
axios.get('http://localhost:3000/axios', {
// 通过选项传递参数，默认传递的是json格式的数据
uname: 'lisi',
pwd: 123
}).then(function(ret) {
console.log(ret.data)
})
</script>
通过URLSearchParams传递参数
<script>
var params = new URLSearchParams()
params.append('uname', 'zhangsan')
params.append('pwd', '111')
axios.get('http://localhost:3000/axios',
params).then(function(ret) {
console.log(ret.data)
})
</script>
put：修改数据
参数传递方式和POST类似
delete：删除数据
参数传递方式与GET类似
axios全局配置
- axios.defaults.timeout = 3000 //超时时间
- axios.defaults.baseURL = 'http://localhost:3000/app' //默认地址
- axios.defaults.headers[ 'mytoken' ] = 'djwbdjwbdwbdajabdjwdq213' //设置请求头
<script>
// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/'
axios.get('
axios-json').then(function(ret) { //相当于这里直接写相对地址
console.log(ret.data.uname)
})
</script>
axios拦截器
请求拦截器：在请求发出之前设置一些信息，比如token
<script>
// axios请求拦截器
axios.interceptors.request.use(function(config) {
console.log(config.url)
// 配置请求头
config.headers.mytoken = 'nihao'
// 一定要return config，否则数据不生效，返回的config是一个对象，包含了响应的内容
return config
},
function(err) {
// 处理错误信息
console.log(err)
})
// 发送asxios请求
axios.get('http://localhost:3000/adata').then(function(data) {
console.log(data)
})
</script>
响应拦截器：在客户端获取数据之前对数据做一些加工处理
<script>
// axios请求拦截器
axios.interceptors.
response.use(function(res) {
console.log(config.url)
// 在这里使用拦截器直接将获取的res对象转换为data数据
var data = res.data
return data
}, function(err) {
// 处理错误信息
console.log(err)
})
// 发送asxios请求
axios.get('http://localhost:3000/adata').then(function(data) {
// 这里的data通过相应拦截器返回后，直接得到data数据，而不是data对象
console.log(data)
})
</script>
async/await
基本用法：async关键字用于函数上（async函数的
返回值是Promise对象）
await关键字用于async函数当中（await可以得到异步的结果）
<script>
async function queryData() {
// await后面要跟一个Promise实例对象，在这个Promise实例对象中处理异步任务
var ret = await axios.get('adata')
console.log(ret.data)
// 返回值是Promise对象
return ret.data
}
// 这里可以接收Promise的返回值
queryData().then(function(data) {
console.log(data)
})
</script>
<script>
async function queryData() {
// await后面要跟一个Promise实例对象，在这个Promise实例对象中处理异步任务
var ret = await new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('nihao')
}, 1000)
})
return ret
}
// 这里可以接收Promise的返回值
queryData().then(function(data) {
console.log(data)
})
</script>
async/await处理多个异步请求
<script>
axios.defaults.baseURL = 'http://localhost:3000'
async function queryData() {
// 按照语句顺序异步执行，提高代码可读性
var info = await axios.get('async1')
var ret = await axios.get('async2?info=' + info.data)
return ret.data
}
queryData().then(function(data) {
console.log(data)
})
</script>
Vue路由
后端路由：根据不同的用户URL请求，返回不同的内容，本质是URL请求地址与服务器资源之间的对应关系
发展过程：
后端渲染（即后端路由）（存在性能问题）
Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）
SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时也支持浏览器地址栏的前进和后退操作
SPA实现原理：基于URL地址的Hash（hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求）
在实现SPA的过程中，最核心的技术点就是前端路由
前端路由：根据不同的用户事件，显示不同的页面内容，本质是用户事件与事件处理函数之间的对应关系
可以提升用户体验，同时也可以使页面更快打开
哈希值在标签中通过href定义，如<a
href="#/zhuye">主页</a>
通过
window.onhashchange函数配合switchcase可以实现不同哈希值（通过location.hash来选中）的页面切换
Vue Router：是Vue.js官方提供的路由管理器，可以非常方便的用于SPA应用程序的开发
功能：支持HTML5历史模式或hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持导航守卫
支持路由懒加载
基本使用：
1.引入相关的库文件
先引入vue文件
<script src="./lib/vue_2.5.22.js"></script>
再引入vue-router文件
<script src="./lib/vue-router_3.0.2.js"></script>
2.添加路由链接
<!-- router-link 是 vue 中提供的标签，默认会被渲染为 a 标签 -->
<!-- to 属性默认会被渲染为 href 属性 -->
<!-- to 属性的值默认会被渲染为 # 开头的 hash 地址 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
3.添加路由填充位
<!-- 路由填充位（也叫做路由占位符） -->
<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置 -->
<router-view></router-view>
4.自定义路由组件
const User = {
template: '<div>User</div>'
}
const Register = {
template: '<div>Register</div>'
}
5.配置路由规则并创建路由实例
// 创建路由实例对象
const router = new VueRouter({
// routes 是路由规则数组
routes: [
// 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：
// path 表示当前路由规则匹配的 hash 地址
// component 表示当前路由规则对应要展示的组件
{
path:'/user',component: User},
{path:'/register',component: Register}
]
})
6.把路由挂载到Vue根实例中
new Vue({
el: '#app',
// 为了能够让路由规则生效，必须把路由对象挂载到 vue 实例对象上
router: router //当属性名和属性值一样时，可以简写成router
});
路由重定向
var router = new VueRouter({
routes: [
// 其中，path 表示需要被重定向的原地址，redirect 表示将要被重定向到的新地址
{path:'/', redirect: '/user'},
{path:'/user',component: User},
{path:'/register',component: Register}
]
})
嵌套路由：
1.父级路由：如上
2.子级路由：
const Register = {
template: `<div>
<h1>Register 组件</h1>
<hr/>
<router-link to="/tab1">Tab1</router-link>
<router-link to="/tab2">Tab2</router-link>
<!-- 子路由填充位置 -->
<router-view /> //自闭合
</div>`
}
3.定义子组件：
const Tab1= {
template: '<div>tab1</div>'
}
const Tab2= {
template: '<div>tab2</div>'
}
3.父级路由通过children属性来配置子级路由
const router = new VueRouter({
routes: [
{ path: '/user', component: User },
{ path: '/register', component: Register,
// 通过 children 属性，为 /register 添加子路由规则
children:
[ { path: '/tab1', component: Tab1 },
{ path: '/tab2', component: Tab2 }
]
}
]
})
动态路由匹配
类似如下的路由：
<!– 有如下 3 个路由链接 -->
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
可以只定义一个路由规则：
var router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
同时在定义的路由组件中可以获取参数，分开显示：
const User = {
// 路由组件中通过$route.params获取路由参数
template: '<div>User {{ $route.params.id }}</div>'
}
路由组件传递参数
因为$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦
1.props的值为布尔类型
routes: [
// 如果 props 被设置为 true，route.params 将会被设置为组件属性，即可以传递参数
{ path: '/user/:id', component: User, props: true }
]
组件中：
const User = {
props: ['id'], // 使用 props 接收路由参数
template: '<div>用户ID：{{ id }}</div>' // 使用路由参数
}
2.props的值为对象类型
const router = new VueRouter({
routes: [
// 如果 props 是一个对象，它会被按原样设置为组件属性
{ path: '/user/:id', component: User,
props: { uname: 'lisi', age: 12 }} //此时id就无用了，因为没有传递
]
})
组件中：
const User = {
props: ['uname', 'age'],
template: ‘<div>用户信息：{{ uname + '---' + age}}</div>'
}
3.props的值为函数类型
const router = new VueRouter({
routes: [
// 如果 props 是一个函数，则这个函数接收 route 对象为自己的形参
{ path: '/user/:id',
component: User,
props: route => ({ uname: 'zs', age: 20, id: route.params.id })} //此处的route对象就是路由的动态参数对象，可以通过params获得id的值
]
})
const User = {
props: ['uname', 'age', 'id'],
template: ‘<div>用户信息：{{ uname + '---' + age + '---' + id}}</div>'
}
命名路由：
为了更加方便的表示路由的路径，可以给
路由规则起一个别名，即为命名路由
const router = new VueRouter({
routes: [
{
path: '/user/:id',
name: 'user',
component: User
}
]
})
使用场景：
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link> //即为给to动态绑定了一个对象，按照name指向路由，并且可以使用params传递参数
router.push({ name: 'user', params: { id: 123 }})
vue-router编程式导航
声明式导航：通过点击链接实现导航的方式，例如普通网页中的<a></a>链接或vue中的<router-link></router-link>
编程式导航：通过调用JavaScript形式的API实现导航的方式，如普通网页中的location.href
常用的编程式导航API：
this.$router.push(‘hash地址’) //跳转到指定地址
this.$router.go(n) //实现页面的前进和后退，n为-1时代表后退一页，n为1时代表前进一页
const User = {
template: '<div><button @click="goRegister">跳转到注册页面</button></div>',
methods: {
goRegister: function(){
// 用编程的方式控制路由跳转
this.$router.push('/register');
}
}
}
router.push()方法的参数规则：
// 字符串(路径名称)
router.push('/home')
// 对象
router.push({ path: '/home' })
// 命名的路由(传递参数)
router.push({ name: '/user', params: { userId: 123 }})
//
带查询参数，变成 /register?uname=lisi
router.push({ path: '/register',
query: { uname: 'lisi' }})