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' }})