Javaweb - 14.6 - Vue3 数据交互 Axios

Promise

普通函数和回调函数

[Promise 简介](#Promise 简介)

[Promise 基本用法](#Promise 基本用法)

[async 和 await 的使用](#async 和 await 的使用)

[Axios 介绍](#Axios 介绍)

[Axios 入门案例](#Axios 入门案例)

[Axios 的 get 和 post 方法](#Axios 的 get 和 post 方法)

[Axios 拦截器](#Axios 拦截器)

完！

Promise

普通函数和回调函数

普通函数：正常调用的函数，一般函数执行完毕后才会继续执行下一行代码

回调函数：一种基于事件的，自动调用，未来会执行的函数。其他的代码不会等待回调函数执行完毕。

举个例子：那年，你和女神风华正茂

承诺：考完试之后，一起去吃麻辣烫~ ----> function(){ }

进行中 ---> 其他代码继续执行（不会影响你和女神备考的行为）
成功 ---> 准备好成功时处理的预案（找一家好吃的麻辣烫~）
失败 ---> 准备好失败时处理的预案（找一个没人注意的墙角偷偷抹泪~）

Promise 就是一个方便我们自己设置一个回调函数的 API

Promise 简介

前端中的异步编程技术，类似 Java 中的多线程 + 线程结果回调

Promise，简单来说就是一个容器，里面保存着某个未来才会结束的事件的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的信息。Promise 提供统一的 API，可以异步操作都可以用同样的方法进行处理。

Promise 对象有以下两个特点：

Promise 对象代表一个异步操作，有三种状态：Pending（进行中），Resolved（已完成），和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态。
一旦状态改变，就不会再发生变化。

Promise 基本用法

javascript 复制代码

    <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 表示函数的：

async 标识函数后，async 函数的返回值会编程一个 Promise 对象
如果函数内部返回的数据是一个非 Promise 对象，async 函数的记过会返回一个成功状态的 Promise 对象
如果函数内部返回的是一个 Promise 对象，则 async 函数返回的状态与结果由该对象决定
如果函数内部抛出的是一个异常，则 async 函数返回一个失败的 Promise 对象
async 其实就是帮助我们用简洁的语法来获得一个 promise 对象~

javascript 复制代码

    <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：

await 右侧的表达式一般为一个 Promise 对象，但也可以是一个其他值
如果表达式是 Promise 对象，await 返回的是 Promise 成功的值
如果表达式是其他的值，则直接返回该值
如果表达式是一个失败状态的 promise，那么 await 会直接抛异常
await 会等右边的 Promise 对象执行结束，然后再获取结果，所在方法的后续代码也会继续等待 await 执行
await 必须在 async 函数中，但是 async 函数中可以没有 await
await 其实就算给我们提供了一个快捷获得 Promise 对象成功状态的语法

javascript 复制代码

    <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":"我努力不是未来"}

准备项目

npm create vite@4.3.2

npm i

npm i axios

html 复制代码

<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.content
        Object.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)
//     }

    //简化3
    async 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 方法：

html 复制代码

<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 方法：

html 复制代码

<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：

html 复制代码

<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：

javascript 复制代码

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,*/*"

        // 设置完毕后 必须要返回 config
        return config
    },
    function(error) {
        console.log("请求前拦截器异常方法")
        // 返回一个失败状态的 promise
        return Promise.reject("something wrong")
    }
)

instance.interceptors.response.use(
    //响应状态码为 200 要执行的方法
    // 处理相应数据
    // 最后要返回 response
    function(response){
        console.log("reponse success:")
        console.log(response)
        return response
    },
    function(error) {
        console.log("response fail")
        console.log(error)
        
    // 最后一定要响应一个 promise
    return Promise.reject("something wrong")
    }
)

//默认导出 instance
export default instance