Javaweb - 14.6 - Vue3 數據交互 Axios

Promise

普通函數和回調函數

Promise 簡介

Promise 基本用法

async 和 await 的使用

Axios 介紹

Axios 入門案例

Axios 的 get 和 post 方法

Axios 攔截器

完！

Promise

普通函數和回調函數

普通函數：正常調用的函數，一般函數執行完畢后才會繼續執行下一行代碼

回調函數：一種基于事件的，自動調用，未來會執行的函數。其他的代碼不會等待回調函數執行完畢。

舉個例子：那年，你和女神風華正茂

????????承諾：考完試之后，一起去吃麻辣燙~? ---->? function(){ }

? ? ? ? 1. 進行中 ---> 其他代碼繼續執行（不會影響你和女神備考的行為）

? ? ? ? 2. 成功? ? --->? ?準備好成功時處理的預案（找一家好吃的麻辣燙~）

? ? ? ? 3. 失敗? ? --->? 準備好失敗時處理的預案（找一個沒人注意的墻角偷偷抹淚~）

Promise 就是一個方便我們自己設置一個回調函數的 API

Promise 簡介

前端中的異步編程技術，類似 Java 中的多線程 + 線程結果回調

Promise，簡單來說就是一個容器，里面保存著某個未來才會結束的事件的結果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的信息。Promise 提供統一的 API，可以異步操作都可以用同樣的方法進行處理。

Promise 對象有以下兩個特點：

? ? ? ? 1. Promise 對象代表一個異步操作，有三種狀態：Pending（進行中），Resolved（已完成），和 Rejected（已失敗）。只有異步操作的結果，可以決定當前是哪一種狀態。

? ? ? ? 2. 一旦狀態改變，就不會再發生變化。

Promise 基本用法

    <script>let promise = new Promise(function (resolve, reject) {console.log("promise do some code.....")resolve("promise success")})// 等待 promise 對象狀態發生變化時才會執行的代碼promise.then(function (value) {// promise 轉換為 resolved 狀態時 會執行的函數console.log('promise success' + value)}).catch(function (value) {// promise 轉換為 reject 會執行的函數console.log("promise fail" + value)})console.log('other code1')console.log("other code 2")</script>

async 和 await 的使用

async 表示函數的：

? ? ? ? 1. async 標識函數后，async 函數的返回值會編程一個 Promise 對象

? ? ? ? 2. 如果函數內部返回的數據是一個非 Promise 對象，async 函數的記過會返回一個成功狀態的 Promise 對象

? ? ? ? 3. 如果函數內部返回的是一個 Promise 對象，則 async 函數返回的狀態與結果由該對象決定

? ? ? ? 4. 如果函數內部拋出的是一個異常，則 async 函數返回一個失敗的 Promise 對象

? ? ? ? 5. async 其實就是幫助我們用簡潔的語法來獲得一個 promise 對象~

    <script>async function fun1() {// return 10// throw new Error("somthing wrong")let promise = Promise.reject("hehe")return promise}let promise = fun1()promise.then(function(value){console.log("success" + value)}).catch(function(value){console.log("fail" + value)})</script>

await：

? ? ? ? 1. await 右側的表達式一般為一個 Promise 對象，但也可以是一個其他值

? ? ? ? 2. 如果表達式是 Promise 對象，await 返回的是 Promise 成功的值

? ? ? ? 3. 如果表達式是其他的值，則直接返回該值

? ? ? ? 4. 如果表達式是一個失敗狀態的 promise，那么 await 會直接拋異常

? ? ? ? 5. await 會等右邊的 Promise 對象執行結束，然后再獲取結果，所在方法的后續代碼也會繼續等待 await 執行

? ? ? ? 6. await 必須在 async 函數中，但是 async 函數中可以沒有 await

? ? ? ? 7. await 其實就算給我們提供了一個快捷獲得 Promise 對象成功狀態的語法

    <script>async function fun1() {return 10}async function fun2() {// let res = await fun1() // 會返回一個 10 普通值let res = await Promise.reject("something wrong")console.log("await got" + res)}fun2()</script>

Axios 介紹

AJAX：

我們在前面提到了 AJAX，AJAX 可以在步重新加載整個頁面的情況下，與服務器交換數據，并更新部分網頁內容。前面我們使用 XMLHttpRequest 只是實現 Ajax 的一種方式，本次我們使用 Vue Axios 方式來實現。

Axios 入門案例

案例需求：請求后臺獲取隨機土味情話

請求的 URL：https://api.uomg.com/api/rand.qinghua

請求的方式： GET/POST

數據返回的格式：{"code":1，"content":"我努力不是未來"}

2. 準備項目

npm create vite@4.3.2

npm i

npm i axios

<script setup>import axios from 'axios'import {ref,reactive} from 'vue'let message = reactive({"code":1,"content":"88888"})function getLoveMessage(){// 使用 axios 發送請求// axios({設置請求的參數}) 請求三要素：1. 請求的 url 2. 請求的方式 3. 請求的參數let promise = axios({url:'https://api.uomg.com/api/rand.qinghua',method:'get',data:{// 當請求的方式為 post 的時候，data 中的數據會以 JSON 串形式放入請求體，否則會以keyvalue 的形式放在 url 后}})promise.then(function (response) {console.log(response)// response 響應結果對象// data 服務端響應回來的數據// status 響應狀態碼 200// headers 本次響應所有的響應頭// request 本次請求發送時使用的 XMLHttpRequest 對象// message.code = response.data.code// message.content=response.data.contentObject.assign(message,response.data) // 這個函數會將后面這個對象的同名屬性值賦值給前面對象的同名屬性值}).catch(function(error){console.log(error)})}// axios 可以簡寫function getLoveWords() {return axios({url:'https://api.uomg.com/api/rand.qinghua',method:'post',data:{}})}//  簡化1// function getLoveMessage2() {//   let promise = getLoveWords()//   promise.then(//     function(response){//       Object.assign(message,response.data)//     }//   )// }// // 簡化2
//     async function getLoveMessage2(){
//       let response = await getLoveWords()
//       Object.assign(message, response.data)
//     }//簡化3async function getLoveMessage2() {// let {data} 為對象結構賦值語法，從一個對象中提取指定的元素let {data} = await getLoveWord()Object.assign(message,response.data)}
</script><template><div><h1 v-text="message"></h1><button @click="getLoveMessage()">change</button></div>
</template><style scoped>
</style>

Axios 的 get 和 post 方法

配置添加語法：

測試 axios 的get 方法：

<script setup type="module">
import axios from 'axios'
import { onMounted, reactive } from 'vue';
let jsonData = reactive({code:1, content:'我努力不是為了你而是因為你'})let getLoveWords = async () => {try {return await axios.get('https://api.uomg.com/api/rand.qinghua',{params: { // 向url后添加的鍵值對參數format: 'json',username: 'zhangsan',password: '123456'},headers: { // 設置請求頭'Accept': 'application/json, text/plain, text/html,*/*'}})} catch (e) {return await e}
}let getLoveMessage = async () => {let { data } = await getLoveWords()Object.assign(jsonData, data)
}/* 通過onMounted生命周期,自動加載一次 */
onMounted(() => {getLoveMessage()
})
</script><template><div><h1>今日土味情話:{{jsonData.content}}</h1><button @click="getLoveMessage">獲取今日土味情話</button></div>
</template><style scoped>
</style>

測試 axios 的post 方法：

<script setup type="module">
import axios from 'axios'
import { onMounted, reactive } from 'vue';
let jsonData = reactive({code:1, content:'我努力不是為了你而是因為你'})
let getLoveWords = async () => {try {return await axios.post('https://api.uomg.com/api/rand.qinghua',{ // 請求體中的JSON數據username: 'zhangsan',password: '123456'},{ // 其他參數params: { // url上拼接的鍵值對參數format: 'json'},headers: { // 請求頭'Accept': 'application/json, text/plain, text/html,*/*','X-Requested-With': 'XMLHttpRequest'}})} catch (e) {return await e}
}
let getLoveMessage = async () => {let { data } = await getLoveWords()Object.assign(jsonData, data)
}
/* 通過onMounted生命周期,自動加載一次 */
onMounted(() => {getLoveMessage()
})
</script><template><div><h1>今日土味情話:{{jsonData.content}}</h1><button @click="getLoveMessage">獲取今日土味情話</button></div>
</template><style scoped>
</style>

Axios 攔截器

在 axios 發送請求之前，或者是數據想贏回來執行 then 方法之前做一些工作，可以使用攔截器完成：

App.vue：

<script setup>import request from './axios'import {reactive} from 'vue'let message = reactive({"code":1,"content":xxxxxxxx,})function getLoveWord(){return request.post("https://api.uomg.com/api/rand.qinghua")}async function getLoveMessage() {let {data} = await getLoveWord()Object.assign(message,response.data)}</script><template><div><h1 v-text="message"></h1><button @click="getLoveMessage()">change</button></div>
</template><style scoped>
</style>

axuis.js：

import axios from 'axios'// 使用 axios 函數創建一個可以發送請求的實例對象
const instance = axios.create({})// 設置請求攔截器
instance.interceptors.request.use((config) => {console.log('請求前攔截器')// 請求之前，設置請求信息的方法config.headers.Accept="application/json,text/plain,text/html,*/*"// 設置完畢后 必須要返回 configreturn config},function(error) {console.log("請求前攔截器異常方法")// 返回一個失敗狀態的 promisereturn Promise.reject("something wrong")}
)instance.interceptors.response.use(//響應狀態碼為 200 要執行的方法// 處理相應數據// 最后要返回 responsefunction(response){console.log("reponse success:")console.log(response)return response},function(error) {console.log("response fail")console.log(error)// 最后一定要響應一個 promisereturn Promise.reject("something wrong")}
)//默認導出 instance
export default instance