文章目錄

• • • 接口調用方式
    • 異步
    • promise
    • 基于Promise發送Ajax請求
    • Promise 基本API
    • • 實例方法
      • • .then()
        • .catch()
        • .finally()
      • 靜態方法
      • • .all()
        • .race()
    • fetch
    • • 概覽
      • fetch請求參數（圖片記錄）
      • fetch API 中的 HTTP 請求
      • fetchAPI 中 響應格式
    • axios
    • • axios基礎用法
      • axios的響應結果
      • axios 全局配置
      • axios 攔截器
    • async 和 await
    • 圖書列表案例
    • • 1. 基于接口案例-獲取圖書列表
      • 2 添加圖書
      • 3 驗證圖書名稱是否存在
      • 4. 編輯圖書
      • 5 刪除圖書
      • 案例
      • 參考接口文檔
• 圖書管理后臺接口文檔
• • 獲取圖書列表數據
  • 添加圖書-提交圖書信息
  • 編輯圖書-根據ID查詢圖書信息
  • 編輯圖書-提交圖書信息
  • 刪除圖書信息
  • 驗證圖書名稱是否存在

接口調用方式

• 原生ajax
• 基于jQuery的ajax
• fetch
• axios

異步

• JavaScript的執行環境是「單線程」
• 所謂單線程，是指JS引擎中負責解釋和執行JavaScript代碼的線程只有一個，也就是一次只能完成一項任務，這個任務執行完后才能執行下一個，它會「阻塞」其他任務。這個任務可稱為主線程
• 異步模式可以一起執行多個任務
• JS中常見的異步調用
  • 定時任何
  • ajax
  • 事件函數

promise

• 主要解決異步深層嵌套的問題
• promise 提供了簡潔的API 使得異步操作更加容易

<script type="text/javascript">/*1. Promise基本使用我們使用new來構建一個Promise Promise的構造函數接收一個參數，是函數，并且傳入兩個參數： resolve，reject， 分別表示異步操作執行成功后的回調函數和異步操作執行失敗后的回調函數*/var p = new Promise(function(resolve, reject){//2. 這里用于實現異步任務 setTimeoutsetTimeout(function(){var flag = false;if(flag) {//3. 正常情況resolve('hello');}else{//4. 異常情況reject('出錯了');}}, 100);});// 5 Promise實例生成以后，可以用then方法指定resolved狀態和reject狀態的回調函數 // 在then方法中，你也可以直接return數據而不是Promise對象，在后面的then中就可以接收到數據了 p.then(function(data){console.log(data)},function(info){console.log(info)});</script>

基于Promise發送Ajax請求

<script type="text/javascript">/*基于Promise發送Ajax請求*/function queryData(url) {# 1.1 創建一個Promise實例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('服務器錯誤');}};xhr.open('get', url);xhr.send(null);});return p;}# 注意： 這里需要開啟一個服務 # 在then方法中，你也可以直接return數據而不是Promise對象，在后面的then中就可以接收到數據了queryData('http://localhost:3000/data').then(function(data){console.log(data)# 1.4 想要繼續鏈式編程下去 需要 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

實例方法

.then()

• 得到異步任務正確的結果

.catch()

• 獲取異常信息

.finally()

• 成功與否都會執行（不是正式標準）

<script type="text/javascript">/*Promise常用API-實例方法*/// console.dir(Promise);function foo() {return new Promise(function(resolve, reject){setTimeout(function(){// resolve(123);reject('error');}, 100);})}// foo()// .then(function(data){// console.log(data)// })// .catch(function(data){// console.log(data)// })// .finally(function(){// console.log('finished')// });// --------------------------// 兩種寫法是等效的foo().then(function(data){# 得到異步任務正確的結果console.log(data)},function(data){# 獲取異常信息console.log(data)})# 成功與否都會執行（不是正式標準） .finally(function(){console.log('finished')});</script>

靜態方法

.all()

• Promise.all方法接受一個數組作參數，數組中的對象（p1、p2、p3）均為promise實例（如果不是一個promise，該項會被用Promise.resolve轉換為一個promise)。它的狀態由這三個promise實例決定

.race()

• Promise.race方法同樣接受一個數組作參數。當p1, p2, p3中有一個實例的狀態發生改變（變為fulfilled或rejected），p的狀態就跟著改變。并把第一個改變狀態的promise的返回值，傳給p的回調函數

?

<script type="text/javascript">/*Promise常用API-對象方法*/// 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('服務器錯誤');}};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 中的參數 [p1,p2,p3] 和 返回的結果一 一對應["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]})Promise.race([p1,p2,p3]).then(function(result){// 由于p1執行較快，Promise的then()將獲得結果'P1'。p2,p3仍在繼續執行，但執行結果將被丟棄。console.log(result) // "HELLO TOM"})</script>

fetch

概覽

• Fetch API是新的ajax解決方案 Fetch會返回Promise
• fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest對象。
• fetch(url, options).then(）

<script type="text/javascript">/*Fetch API 基本用法fetch(url).then()第一個參數請求的路徑 Fetch會返回Promise 所以我們可以使用then 拿到請求成功的結果 */fetch('http://localhost:3000/fdata').then(function(data){// text()方法屬于fetchAPI的一部分，它返回一個Promise實例對象，用于獲取后臺返回的數據return data.text();}).then(function(data){// 在這個then里面我們能拿到最終的數據 console.log(data);})</script>

fetch請求參數（圖片記錄）

fetch API 中的 HTTP 請求

• fetch(url, options).then(）
• HTTP協議，它給我們提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
  • 默認的是 GET 請求
  • 需要在 options 對象中 指定對應的 method method:請求使用的方法
  • post 和 普通 請求的時候 需要在options 中 設置 請求頭 headers 和 body

<script type="text/javascript">/*Fetch API 調用接口傳遞參數*/#1.1 GET參數傳遞 - 傳統URL 通過url ？ 的形式傳參 fetch('http://localhost:3000/books?id=123', {# get 請求可以省略不寫 默認的是GET method: 'get'}).then(function(data) {# 它返回一個Promise實例對象，用于獲取后臺返回的數據return data.text();}).then(function(data) {# 在這個then里面我們能拿到最終的數據 console.log(data)});#1.2 GET參數傳遞 restful形式的URL 通過/ 的形式傳遞參數 即 id = 456 和id后臺的配置有關 fetch('http://localhost:3000/books/456', {# get 請求可以省略不寫 默認的是GET method: 'get'}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});#2.1 DELETE請求方式參數傳遞 刪除id 是 id=789fetch('http://localhost:3000/books/789', {method: 'delete'}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});#3 POST請求傳參fetch('http://localhost:3000/books', {method: 'post',# 3.1 傳遞數據 body: 'uname=lisi&pwd=123',# 3.2 設置請求頭 headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});# POST請求傳參fetch('http://localhost:3000/books', {method: 'post',body: JSON.stringify({uname: '張三',pwd: '456'}),headers: {'Content-Type': 'application/json'}}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});# PUT請求傳參 修改id 是 123 的 fetch('http://localhost:3000/books/123', {method: 'put',body: JSON.stringify({uname: '張三',pwd: '789'}),headers: {'Content-Type': 'application/json'}}).then(function(data) {return data.text();}).then(function(data) {console.log(data)});</script>

fetchAPI 中 響應格式

• 用fetch來獲取數據，如果響應正常返回，我們首先看到的是一個response對象，其中包括返回的一堆原始字節，這些字節需要在收到后，需要我們通過調用方法將其轉換為相應格式的數據，比如JSON，BLOB或者TEXT等等

/*Fetch響應結果的數據格式*/fetch('http://localhost:3000/json').then(function(data){// return data.json(); // 將獲取到的數據使用 json 轉換對象return data.text(); // // 將獲取到的數據 轉換成字符串 }).then(function(data){// console.log(data.uname)// console.log(typeof data)var obj = JSON.parse(data);console.log(obj.uname,obj.age,obj.gender)})

axios

• 基于promise用于瀏覽器和node.js的http客戶端
• 支持瀏覽器和node.js
• 支持promise
• 能攔截請求和響應
• 自動轉換JSON數據
• 能轉換請求和響應數據

axios基礎用法

• get和 delete請求傳遞參數
  • 通過傳統的url 以 ? 的形式傳遞參數
  • restful 形式傳遞參數
  • 通過params 形式傳遞參數

• post 和 put 請求傳遞參數
  • 通過選項傳遞參數
  • 通過 URLSearchParams 傳遞參數

# 1. 發送get 請求 axios.get('http://localhost:3000/adata').then(function(ret){ # 拿到 ret 是一個對象 所有的對象都存在 ret 的data 屬性里面// 注意data屬性是固定的用法，用于獲取后臺的實際數據// console.log(ret.data)console.log(ret)})# 2. get 請求傳遞參數# 2.1 通過傳統的url 以 ? 的形式傳遞參數axios.get('http://localhost:3000/axios?id=123').then(function(ret){console.log(ret.data)})# 2.2 restful 形式傳遞參數 axios.get('http://localhost:3000/axios/123').then(function(ret){console.log(ret.data)})# 2.3 通過params 形式傳遞參數 axios.get('http://localhost:3000/axios', {params: {id: 789}}).then(function(ret){console.log(ret.data)})#3 axios delete 請求傳參 傳參的形式和 get 請求一樣axios.delete('http://localhost:3000/axios', {params: {id: 111}}).then(function(ret){console.log(ret.data)})# 4 axios 的 post 請求# 4.1 通過選項傳遞參數axios.post('http://localhost:3000/axios', {uname: 'lisi',pwd: 123}).then(function(ret){console.log(ret.data)})# 4.2 通過 URLSearchParams 傳遞參數 var params = new URLSearchParams();params.append('uname', 'zhangsan');params.append('pwd', '111');axios.post('http://localhost:3000/axios', params).then(function(ret){console.log(ret.data)})#5 axios put 請求傳參 和 post 請求一樣 axios.put('http://localhost:3000/axios/123', {uname: 'lisi',pwd: 123}).then(function(ret){console.log(ret.data)})

axios的響應結果

axios 全局配置

# 配置公共的請求頭 axios.defaults.baseURL = 'https://api.example.com'; # 配置 超時時間 axios.defaults.timeout = 2500; # 配置公共的請求頭 axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; # 配置公共的 post 的 Content-Type axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios 攔截器

• 請求攔截器
  • 請求攔截器的作用是在請求發送前進行一些操作
    • 例如在每個請求體里加上token，統一做了處理如果以后要改也非常容易

• 響應攔截器
  • 響應攔截器的作用是在接收到響應后進行一些操作
    • 例如在服務器返回登錄狀態失效，需要重新登錄的時候，跳轉到登錄頁

# 1. 請求攔截器 axios.interceptors.request.use(function(config) {console.log(config.url)# 1.1 任何請求都會經過這一步 在發送請求之前做些什么 config.headers.mytoken = 'nihao';# 1.2 這里一定要return 否則配置不成功 return config;}, function(err){#1.3 對請求錯誤做點什么 console.log(err)})#2. 響應攔截器 axios.interceptors.response.use(function(res) {#2.1 在接收響應做些什么 var data = res.data;return data;}, function(err){#2.2 對響應錯誤做點什么 console.log(err)})

async 和 await

async 和await的結合promise用法

• async作為一個關鍵字放到函數前面
  • 任何一個async函數都會隱式返回一個promise
• await關鍵字只能在使用async定義的函數中使用
  • ? await后面可以直接跟一個 Promise實例對象
  • ? await函數不能單獨使用
• async/await 讓異步代碼看起來、表現起來更像同步代碼

# 1. async 基礎用法# 1.1 async作為一個關鍵字放到函數前面async function queryData() {# 1.2 await關鍵字只能在使用async定義的函數中使用 await后面可以直接跟一個 Promise實例對象var ret = await new Promise(function(resolve, reject){setTimeout(function(){resolve('nihao')},1000);})// console.log(ret.data)return ret;}# 1.3 任何一個async函數都會隱式返回一個promise 我們可以使用then 進行鏈式編程queryData().then(function(data){console.log(data)})#2. async 函數處理多個異步函數axios.defaults.baseURL = 'http://localhost:3000';async function queryData() {# 2.1 添加await之后 當前的await 返回結果之后才會執行后面的代碼 var info = await axios.get('async1');#2.2 讓異步代碼看起來、表現起來更像同步代碼var ret = await axios.get('async2?info=' + info.data);return ret.data;}queryData().then(function(data){console.log(data)})

圖書列表案例

1. 基于接口案例-獲取圖書列表

• 導入axios 用來發送ajax
• 把獲取到的數據渲染到頁面上

<div id="app"><div class="grid"><table><thead><tr><th>編號</th><th>名稱</th><th>時間</th><th>操作</th></tr></thead><tbody><!-- 5. 把books 中的數據渲染到頁面上 --><tr :key='item.id' v-for='item in books'><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date }}</td><td><a href="">修改</a><span>|</span><a href="">刪除</a></td></tr></tbody></table></div></div><script type="text/javascript" src="js/vue.js"></script>1. 導入axios <script type="text/javascript" src="js/axios.js"></script><script type="text/javascript">/*圖書管理-添加圖書*/# 2 配置公共的url地址 簡化后面的調用方式axios.defaults.baseURL = 'http://localhost:3000/';axios.interceptors.response.use(function(res) {return res.data;}, function(error) {console.log(error)});var vm = new Vue({el: '#app',data: {flag: false,submitFlag: false,id: '',name: '',books: []},methods: {# 3 定義一個方法 用來發送 ajax # 3.1 使用 async 來 讓異步的代碼 以同步的形式書寫 queryData: async function() {// 調用后臺接口獲取圖書列表數據// var ret = await axios.get('books');// this.books = ret.data;# 3.2 發送ajax請求 把拿到的數據放在books 里面 this.books = await axios.get('books');}},mounted: function() {# 4 mounted 里面 DOM已經加載完畢 在這里調用函數 this.queryData();}});</script>

2 添加圖書

• 獲取用戶輸入的數據 發送到后臺
• 渲染最新的數據到頁面上

methods: {handle: async function(){if(this.flag) {// 編輯圖書// 就是根據當前的ID去更新數組中對應的數據this.books.some((item) => {if(item.id == this.id) {item.name = this.name;// 完成更新操作之后，需要終止循環return true;}});this.flag = false;}else{# 1.1 在前面封裝好的 handle 方法中 發送ajax請求 # 1.2 使用async 和 await 簡化操作 需要在 function 前面添加 async var ret = await axios.post('books', {name: this.name})# 1.3 根據后臺返回的狀態碼判斷是否加載數據 if(ret.status == 200) {# 1.4 調用 queryData 這個方法 渲染最新的數據 this.queryData();}}// 清空表單this.id = '';this.name = '';}, }

3 驗證圖書名稱是否存在

• 添加圖書之前發送請求驗證圖示是否已經存在
• 如果不存在 往后臺里面添加圖書名稱
  • 圖書存在與否只需要修改submitFlag的值即可

watch: {name: async function(val) {// 驗證圖書名稱是否已經存在// 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;}} },

4. 編輯圖書

• 根據當前書的id 查詢需要編輯的書籍
• 需要根據狀態位判斷是添加還是編輯

methods: {handle: async function(){if(this.flag) {#4.3 編輯圖書 把用戶輸入的信息提交到后臺var ret = await axios.put('books/' + this.id, {name: this.name});if(ret.status == 200){#4.4 完成添加后 重新加載列表數據this.queryData();}this.flag = false;}else{// 添加圖書var ret = await axios.post('books', {name: this.name})if(ret.status == 200) {// 重新加載列表數據this.queryData();}}// 清空表單this.id = '';this.name = '';},toEdit: async function(id){#4.1 flag狀態位用于區分編輯和添加操作this.flag = true;#4.2 根據id查詢出對應的圖書信息 頁面中可以加載出來最新的信息# 調用接口發送ajax 請求 var ret = await axios.get('books/' + id);this.id = ret.id;this.name = ret.name;},

5 刪除圖書

• 把需要刪除的id書籍 通過參數的形式傳遞到后臺

deleteBook: async function(id){// 刪除圖書var ret = await axios.delete('books/' + id);if(ret.status == 200) {// 重新加載列表數據this.queryData();}}

案例

<!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">編號：</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>圖書總數：</span><span>{{total}}</span></div><table><thead><tr><th>編號</th><th>名稱</th><th>時間</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(), //小時 "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){// 重新加載列表數據this.queryData();}this.flag = false;}else{// 添加圖書var ret = await axios.post('books', {name: this.name})if(ret.status == 200) {// 重新加載列表數據this.queryData();}}// 清空表單this.id = '';this.name = '';},toEdit: async function(id){// flag狀態位用于區分編輯和添加操作this.flag = true;// 根據id查詢出對應的圖書信息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) {// 重新加載列表數據this.queryData();}},queryData: async function(){// 調用后臺接口獲取圖書列表數據// var ret = await axios.get('books');// this.books = ret.data;this.books = await axios.get('books');}},computed: {total: function(){// 計算圖書的總數return this.books.length;}},watch: {name: async function(val) {// 驗證圖書名稱是否已經存在// 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>

參考接口文檔

圖書管理后臺接口文檔

基準路徑： http://localhost:3000/

獲取圖書列表數據

• 路徑：books
• 請求參數：無
• 響應結果

[{"id": "4","name": "紅樓夢","date": 2525609975000 }, {"name": "三國演義","date": 2525609975000,"id": 5 }, {"name": "水滸傳","date": 2525609975000,"id": 6 }, {"name": "西游記","date": 2525609975000,"id": 7 }]

添加圖書-提交圖書信息

• 路徑：books
• 請求參數
  • name : 圖書名稱
• 響應結果

{"status": 200 // (200表示成功；500表示失敗) }

編輯圖書-根據ID查詢圖書信息

• 路徑：books/:id
• 請求參數：無
• 響應結果

{"name":"西游記","date":2525609975000,"id":7 }

編輯圖書-提交圖書信息

• 路徑：books/:id
• 請求參數
  • name : 圖書名稱
• 響應結果

{"status": 200 // (200表示成功；500表示失敗) }

刪除圖書信息

• 路徑：books/:id
• 請求參數: 無
• 響應結果

{"status": 200 // (200表示成功；500表示失敗) }

驗證圖書名稱是否存在

• 路徑：books/book/:name
• 請求參數:無
• 響應結果

{"status": 1 // (1表示存在；2表示不存在) }

總結

以上是生活随笔為你收集整理的vue-day04-vue前端交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。