Javaweb - 14.6 - Vue3 数据交互 Axios

Zz_waiting.2025-09-10 21:04

目录

Promise

普通函数和回调函数

[Promise 简介](#Promise 简介)

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

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

[Axios 介绍](#Axios 介绍)

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

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

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

完！

Promise

普通函数和回调函数

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

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

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

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

  1. 进行中 ---> 其他代码继续执行 （不会影响你和女神备考的行为）

  2. 成功 ---> 准备好成功时处理的预案（找一家好吃的麻辣烫~）

  3. 失败 ---> 准备好失败时处理的预案（找一个没人注意的墙角偷偷抹泪~）

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

Promise 简介

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

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

Promise 对象有以下两个特点：

  1. Promise 对象代表一个异步操作，有三种状态：Pending（进行中），Resolved（已完成），和 Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态。

  2. 一旦状态改变，就不会再发生变化。

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

  1. async 标识函数后，async 函数的返回值会编程一个 Promise 对象

  2. 如果函数内部返回的数据是一个非 Promise 对象，async 函数的记过会返回一个成功状态的 Promise 对象

  3. 如果函数内部返回的是一个 Promise 对象，则 async 函数返回的状态与结果由该对象决定

  4. 如果函数内部抛出的是一个异常，则 async 函数返回一个失败的 Promise 对象

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

  1. await 右侧的表达式一般为一个 Promise 对象，但也可以是一个其他值

  2. 如果表达式是 Promise 对象，await 返回的是 Promise 成功的值

  3. 如果表达式是其他的值，则直接返回该值

  4. 如果表达式是一个失败状态的 promise，那么 await 会直接抛异常

  5. await 会等右边的 Promise 对象执行结束，然后再获取结果，所在方法的后续代码也会继续等待 await 执行

  6. await 必须在 async 函数中，但是 async 函数中可以没有 await

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

  1. 准备项目

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

完！

相关推荐
前端不太难1 小时前
从 Navigation State 反推架构腐化
前端·架构·react
前端程序猿之路2 小时前
Next.js 入门指南 - 从 Vue 角度的理解
前端·vue.js·语言模型·ai编程·入门·next.js·deepseek
Larry_Yanan2 小时前
Qt多进程（三）QLocalSocket
开发语言·c++·qt·ui
大布布将军2 小时前
⚡️ 深入数据之海：SQL 基础与 ORM 的应用
前端·数据库·经验分享·sql·程序人生·面试·改行学it
醒过来摸鱼2 小时前
Java classloader
java·开发语言·python
superman超哥2 小时前
仓颉语言中元组的使用：深度剖析与工程实践
c语言·开发语言·c++·python·仓颉
小鸡吃米…2 小时前
Python - 继承
开发语言·python
川贝枇杷膏cbppg2 小时前
Redis 的 RDB 持久化
前端·redis·bootstrap
D_C_tyu2 小时前
Vue3 + Element Plus | el-table 表格获取排序后的数据
javascript·vue.js·elementui
JIngJaneIL2 小时前
基于java+ vue农产投入线上管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Multisim使用教程详尽版--(2025最新版)07CentOS的ISO镜像下载08Gemini3 生成的基于手势控制3D粒子圣诞树09Labelme从安装到标注：零基础完整指南10jdk21下载、安装（Windows、Linux、macOS）