vue-day04-vue前端交互
生活随笔
收集整理的這篇文章主要介紹了
vue-day04-vue前端交互
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 接口調(diào)用方式
- 異步
- promise
- 基于Promise發(fā)送Ajax請(qǐng)求
- Promise 基本API
- 實(shí)例方法
- .then()
- .catch()
- .finally()
- 靜態(tài)方法
- .all()
- .race()
- fetch
- 概覽
- fetch請(qǐng)求參數(shù)（圖片記錄）
- fetch API 中的 HTTP 請(qǐng)求
- fetchAPI 中 響應(yīng)格式
- axios
- axios基礎(chǔ)用法
- axios的響應(yīng)結(jié)果
- axios 全局配置
- axios 攔截器
- async 和 await
- 圖書列表案例
- 1. 基于接口案例-獲取圖書列表
- 2 添加圖書
- 3 驗(yàn)證圖書名稱是否存在
- 4. 編輯圖書
- 5 刪除圖書
- 案例
- 參考接口文檔
- 圖書管理后臺(tái)接口文檔
- 獲取圖書列表數(shù)據(jù)
- 添加圖書-提交圖書信息
- 編輯圖書-根據(jù)ID查詢圖書信息
- 編輯圖書-提交圖書信息
- 刪除圖書信息
- 驗(yàn)證圖書名稱是否存在
接口調(diào)用方式
- 原生ajax
- 基于jQuery的ajax
- fetch
- axios
異步
- JavaScript的執(zhí)行環(huán)境是「單線程」
- 所謂單線程，是指JS引擎中負(fù)責(zé)解釋和執(zhí)行JavaScript代碼的線程只有一個(gè)，也就是一次只能完成一項(xiàng)任務(wù)，這個(gè)任務(wù)執(zhí)行完后才能執(zhí)行下一個(gè)，它會(huì)「阻塞」其他任務(wù)。這個(gè)任務(wù)可稱為主線程
- 異步模式可以一起執(zhí)行多個(gè)任務(wù)
- JS中常見的異步調(diào)用
- 定時(shí)任何
- ajax
- 事件函數(shù)
promise
- 主要解決異步深層嵌套的問題
- promise 提供了簡(jiǎn)潔的API 使得異步操作更加容易
基于Promise發(fā)送Ajax請(qǐng)求
<script type="text/javascript">/*基于Promise發(fā)送Ajax請(qǐng)求*/function queryData(url) {# 1.1 創(chuàng)建一個(gè)Promise實(shí)例var p = new Promise(function(resolve, reject){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState != 4) return;if(xhr.readyState == 4 && xhr.status == 200) {# 1.2 處理正常的情況resolve(xhr.responseText);}else{# 1.3 處理異常情況reject('服務(wù)器錯(cuò)誤');}};xhr.open('get', url);xhr.send(null);});return p;}# 注意： 這里需要開啟一個(gè)服務(wù) # 在then方法中，你也可以直接return數(shù)據(jù)而不是Promise對(duì)象，在后面的then中就可以接收到數(shù)據(jù)了queryData('http://localhost:3000/data').then(function(data){console.log(data)# 1.4 想要繼續(xù)鏈?zhǔn)骄幊滔氯?需要 return return queryData('http://localhost:3000/data1');}).then(function(data){console.log(data);return queryData('http://localhost:3000/data2');}).then(function(data){console.log(data)});</script>Promise 基本API
實(shí)例方法
.then()
- 得到異步任務(wù)正確的結(jié)果
.catch()
- 獲取異常信息
.finally()
- 成功與否都會(huì)執(zhí)行（不是正式標(biāo)準(zhǔn)）
靜態(tài)方法
.all()
- Promise.all方法接受一個(gè)數(shù)組作參數(shù)，數(shù)組中的對(duì)象（p1、p2、p3）均為promise實(shí)例（如果不是一個(gè)promise，該項(xiàng)會(huì)被用Promise.resolve轉(zhuǎn)換為一個(gè)promise)。它的狀態(tài)由這三個(gè)promise實(shí)例決定
.race()
- Promise.race方法同樣接受一個(gè)數(shù)組作參數(shù)。當(dāng)p1, p2, p3中有一個(gè)實(shí)例的狀態(tài)發(fā)生改變（變?yōu)閒ulfilled或rejected），p的狀態(tài)就跟著改變。并把第一個(gè)改變狀態(tài)的promise的返回值，傳給p的回調(diào)函數(shù)
?
<script type="text/javascript">/*Promise常用API-對(duì)象方法*/// console.dir(Promise)function queryData(url) {return new Promise(function(resolve, reject){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState != 4) return;if(xhr.readyState == 4 && xhr.status == 200) {// 處理正常的情況resolve(xhr.responseText);}else{// 處理異常情況reject('服務(wù)器錯(cuò)誤');}};xhr.open('get', url);xhr.send(null);});}var p1 = queryData('http://localhost:3000/a1');var p2 = queryData('http://localhost:3000/a2');var p3 = queryData('http://localhost:3000/a3');Promise.all([p1,p2,p3]).then(function(result){// all 中的參數(shù) [p1,p2,p3] 和 返回的結(jié)果一 一對(duì)應(yīng)["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]})Promise.race([p1,p2,p3]).then(function(result){// 由于p1執(zhí)行較快，Promise的then()將獲得結(jié)果'P1'。p2,p3仍在繼續(xù)執(zhí)行，但執(zhí)行結(jié)果將被丟棄。console.log(result) // "HELLO TOM"})</script>fetch
概覽
- Fetch API是新的ajax解決方案 Fetch會(huì)返回Promise
- fetch不是ajax的進(jìn)一步封裝，而是原生js，沒有使用XMLHttpRequest對(duì)象。
- fetch(url, options).then(）
fetch請(qǐng)求參數(shù)（圖片記錄）
fetch API 中的 HTTP 請(qǐng)求
- fetch(url, options).then(）
- HTTP協(xié)議，它給我們提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
- 默認(rèn)的是 GET 請(qǐng)求
- 需要在 options 對(duì)象中 指定對(duì)應(yīng)的 method method:請(qǐng)求使用的方法
- post 和 普通 請(qǐng)求的時(shí)候 需要在options 中 設(shè)置 請(qǐng)求頭 headers 和 body
fetchAPI 中 響應(yīng)格式
- 用fetch來獲取數(shù)據(jù)，如果響應(yīng)正常返回，我們首先看到的是一個(gè)response對(duì)象，其中包括返回的一堆原始字節(jié)，這些字節(jié)需要在收到后，需要我們通過調(diào)用方法將其轉(zhuǎn)換為相應(yīng)格式的數(shù)據(jù)，比如JSON，BLOB或者TEXT等等
axios
- 基于promise用于瀏覽器和node.js的http客戶端
- 支持瀏覽器和node.js
- 支持promise
- 能攔截請(qǐng)求和響應(yīng)
- 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
- 能轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
axios基礎(chǔ)用法
- get和 delete請(qǐng)求傳遞參數(shù)
- 通過傳統(tǒng)的url 以 ? 的形式傳遞參數(shù)
- restful 形式傳遞參數(shù)
- 通過params 形式傳遞參數(shù)
- post 和 put 請(qǐng)求傳遞參數(shù)
- 通過選項(xiàng)傳遞參數(shù)
- 通過 URLSearchParams 傳遞參數(shù)
axios的響應(yīng)結(jié)果
axios 全局配置
# 配置公共的請(qǐng)求頭 axios.defaults.baseURL = 'https://api.example.com'; # 配置 超時(shí)時(shí)間 axios.defaults.timeout = 2500; # 配置公共的請(qǐng)求頭 axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; # 配置公共的 post 的 Content-Type axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';axios 攔截器
- 請(qǐng)求攔截器
- 請(qǐng)求攔截器的作用是在請(qǐng)求發(fā)送前進(jìn)行一些操作
- 例如在每個(gè)請(qǐng)求體里加上token，統(tǒng)一做了處理如果以后要改也非常容易
- 請(qǐng)求攔截器的作用是在請(qǐng)求發(fā)送前進(jìn)行一些操作
- 響應(yīng)攔截器
- 響應(yīng)攔截器的作用是在接收到響應(yīng)后進(jìn)行一些操作
- 例如在服務(wù)器返回登錄狀態(tài)失效，需要重新登錄的時(shí)候，跳轉(zhuǎn)到登錄頁
- 響應(yīng)攔截器的作用是在接收到響應(yīng)后進(jìn)行一些操作
async 和 await
async 和await的結(jié)合promise用法
- async作為一個(gè)關(guān)鍵字放到函數(shù)前面
- 任何一個(gè)async函數(shù)都會(huì)隱式返回一個(gè)promise
- await關(guān)鍵字只能在使用async定義的函數(shù)中使用
- ? await后面可以直接跟一個(gè) Promise實(shí)例對(duì)象
- ? await函數(shù)不能單獨(dú)使用
- async/await 讓異步代碼看起來、表現(xiàn)起來更像同步代碼
圖書列表案例
1. 基于接口案例-獲取圖書列表
- 導(dǎo)入axios 用來發(fā)送ajax
- 把獲取到的數(shù)據(jù)渲染到頁面上
2 添加圖書
- 獲取用戶輸入的數(shù)據(jù) 發(fā)送到后臺(tái)
- 渲染最新的數(shù)據(jù)到頁面上
3 驗(yàn)證圖書名稱是否存在
- 添加圖書之前發(fā)送請(qǐng)求驗(yàn)證圖示是否已經(jīng)存在
- 如果不存在 往后臺(tái)里面添加圖書名稱
- 圖書存在與否只需要修改submitFlag的值即可
4. 編輯圖書
- 根據(jù)當(dāng)前書的id 查詢需要編輯的書籍
- 需要根據(jù)狀態(tài)位判斷是添加還是編輯
5 刪除圖書
- 把需要?jiǎng)h除的id書籍 通過參數(shù)的形式傳遞到后臺(tái)
案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body><div id="app"><div class="grid"><div><h1>圖書管理</h1><div class="book"><div><label for="id">編號(hào)：</label><input type="text" id="id" v-model='id' disabled="false" v-focus><label for="name">名稱：</label><input type="text" id="name" v-model='name'><button @click='handle' :disabled="submitFlag">提交</button></div></div></div><div class="total"><span>圖書總數(shù)：</span><span>{{total}}</span></div><table><thead><tr><th>編號(hào)</th><th>名稱</th><th>時(shí)間</th><th>操作</th></tr></thead><tbody><tr :key='item.id' v-for='item in books'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td><td><a href="" @click.prevent='toEdit(item.id)'>修改</a><span>|</span><a href="" @click.prevent='deleteBook(item.id)'>刪除</a></td></tr></tbody></table></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">/*圖書管理-添加圖書*/axios.defaults.baseURL = 'http://localhost:3000/';axios.interceptors.response.use(function(res){return res.data;}, function(error){console.log(error)});Vue.directive('focus', {inserted: function (el) {el.focus();}});Vue.filter('format', function(value, arg) {function dateFormat(date, format) {if (typeof date === "string") {var mts = date.match(/(\/Date\((\d+)\)\/)/);if (mts && mts.length >= 3) {date = parseInt(mts[2]);}}date = new Date(date);if (!date || date.toUTCString() == "Invalid Date") {return "";}var map = {"M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小時(shí) "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 };format = format.replace(/([yMdhmsqS])+/g, function(all, t) {var v = map[t];if (v !== undefined) {if (all.length > 1) {v = '0' + v;v = v.substr(v.length - 2);}return v;} else if (t === 'y') {return (date.getFullYear() + '').substr(4 - all.length);}return all;});return format;}return dateFormat(value, arg);})var vm = new Vue({el: '#app',data: {flag: false,submitFlag: false,id: '',name: '',books: []},methods: {handle: async function(){if(this.flag) {// 編輯圖書var ret = await axios.put('books/' + this.id, {name: this.name});if(ret.status == 200){// 重新加載列表數(shù)據(jù)this.queryData();}this.flag = false;}else{// 添加圖書var ret = await axios.post('books', {name: this.name})if(ret.status == 200) {// 重新加載列表數(shù)據(jù)this.queryData();}}// 清空表單this.id = '';this.name = '';},toEdit: async function(id){// flag狀態(tài)位用于區(qū)分編輯和添加操作this.flag = true;// 根據(jù)id查詢出對(duì)應(yīng)的圖書信息var ret = await axios.get('books/' + id);this.id = ret.id;this.name = ret.name;},deleteBook: async function(id){// 刪除圖書var ret = await axios.delete('books/' + id);if(ret.status == 200) {// 重新加載列表數(shù)據(jù)this.queryData();}},queryData: async function(){// 調(diào)用后臺(tái)接口獲取圖書列表數(shù)據(jù)// var ret = await axios.get('books');// this.books = ret.data;this.books = await axios.get('books');}},computed: {total: function(){// 計(jì)算圖書的總數(shù)return this.books.length;}},watch: {name: async function(val) {// 驗(yàn)證圖書名稱是否已經(jīng)存在// var flag = this.books.some(function(item){// return item.name == val;// });var ret = await axios.get('/books/book/' + this.name);if(ret.status == 1) {// 圖書名稱存在this.submitFlag = true;}else{// 圖書名稱不存在this.submitFlag = false;}}},mounted: function(){// var that = this;// axios.get('books').then(function(data){// console.log(data.data)// that.books = data.data;// })// axios.get('books').then((data)=>{// console.log(data.data)// this.books = data.data;// })this.queryData();}});</script> </body> </html>參考接口文檔
圖書管理后臺(tái)接口文檔
基準(zhǔn)路徑： http://localhost:3000/
獲取圖書列表數(shù)據(jù)
- 路徑：books
- 請(qǐng)求參數(shù)：無
- 響應(yīng)結(jié)果
添加圖書-提交圖書信息
- 路徑：books
- 請(qǐng)求參數(shù)
- name : 圖書名稱
- 響應(yīng)結(jié)果
編輯圖書-根據(jù)ID查詢圖書信息
- 路徑：books/:id
- 請(qǐng)求參數(shù)：無
- 響應(yīng)結(jié)果
編輯圖書-提交圖書信息
- 路徑：books/:id
- 請(qǐng)求參數(shù)
- name : 圖書名稱
- 響應(yīng)結(jié)果
刪除圖書信息
- 路徑：books/:id
- 請(qǐng)求參數(shù): 無
- 響應(yīng)結(jié)果
驗(yàn)證圖書名稱是否存在
- 路徑：books/book/:name
- 請(qǐng)求參數(shù):無
- 響應(yīng)結(jié)果
總結(jié)
以上是生活随笔為你收集整理的vue-day04-vue前端交互的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 发现还是 True Image Serv
- 下一篇： 4.2路由算法与路由协议概述