devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3：数据交互（axios）

作者：小蓝xlanll | 2024-05-20 19:42:43

赞

踩

Vue3：数据交互（axios）

回调函数 

> 回调函数: 一些特殊的函数,表示未来才会执行的一些功能,后续代码不会等待该函数执行完毕就开始执行了

1. Promise

1.1 简介

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

* Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了`Promise`对象。
  
* 所谓`Promise`，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise三种状态：

（1）Promise对象代表一个异步操作，有三种状态：`Pending`（进行中）、`Resolved`（已完成，又称 Fulfilled）和`Rejected`（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从`Pending`变为`Resolved`和从`Pending`变为`Rejected`。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。

1.2. 基本用法 

  1. <script>
  2.  
  3.         //基础用法
  4.         console.log("code1执行")
  5.         /**
  6.          * 参数1：resovle函数是成功结果
  7.          * 参数2：reject函数是失败结果
  8.         */
  9.         //创建promise对象
  10.         let promise = new Promise(function(resolve, reject) {
  11.             console.log("promise执行")
  12.             resolve()
  13.             //reject()
  14.         })
  15.  
  16.         promise.then(
  17.             //调用promise时会根据上面放行结果执行函数1还是函数2
  18.             //当上面调用resolve()函数时会执行then的参数1
  19.             function() {
  20.                 console.log("promise resolve")
  21.             },
  22.  
  23.             //当上面调用reject()函数时会执行then的参数二
  24.             function() {
  25.                 console.log("promise reject")
  26.             }
  27.         )
  28.  
  29.         console.log("code2执行")
  30.     </script>

 1.3 Promise catch()用法

catch用于捕捉异常或者错误时执行的回调函数 

  1. <script>
  2.         //catch用法
  3.  
  4.         console.log("code1执行")
  5.         //创建promise对象
  6.         let promise = new Promise(function (resolve, reject) {
  7.             console.log("调用promise啦")
  8.             throw new Error("promise抛出异常")
  9.         })
  10.  
  11.             //当执行结果为成功时会执行下面的函数
  12.         promise.then(
  13.             function() {
  14.                 console.log("promise resolve")
  15.             }
  16.             //当执行结果为失败或者有异常时会执行catch里面的函数
  17.         ).catch(
  18.             function(error) {
  19.                 console.log(error)
  20.             }
  21.         )
  22.  
  23.         console.log("code2执行")
  24.  
  25.     </script>

 1.4 async关键字

使用async关键字后可以简易的创建一个Promise对象 

  1. <script>
  2.         console.log("async关键字1")
  3.         /**
  4.          * async：
  5.          * 通过async关键字可简洁的创建promise对象
  6.          * 1.async修饰的函数调用后若函数返回结果为非promise对象，则会创建一个resolve结果的promise对象
  7.          * 2.async修饰的函数调用后若函数返回结果为prmoise对象，则此时async函数返回的结果由该对象的状态决定
  8.          * 3.若async修饰的函数抛出异常，则会返回一个reject结果的promise对象
  9.          */
  10.         async function fun1() {
  11.             console.log("async关键字创建promise对象啦")
  12.             //当正常返回结果时会执行resolve结果的函数
  13.             //return 10
  14.             throw new Error("返回异常")
  15.         }
  16.  
  17.         //调用async关键字修饰的函数会返回一个promise对象
  18.         let promise = fun1()
  19.  
  20.         promise.then(
  21.             //若函数正常返回结果即执行resolve函数
  22.             //可以在执行reslolve结果的函数中使用参数接收返回结果，此时value即返回结果
  23.             function(value) {
  24.                 console.log("resolve:" + value)
  25.             }
  26.         ).catch(
  27.             function(error) {
  28.                 console.log("reject/exceptin:" + error)
  29.             }
  30.         )
  31.  
  32.         console.log("async关键字2")
  33.     </script>

 1.5 await关键字

通过await关键字可以简易的获取Promise对象里面的信息 

  1. <script>
  2.         /**
  3.          * await:
  4.          * 1.await必须在async修饰的函数中使用
  5.          * 2.await一般右侧是promise对象，但是也可也是其他值，如果是其他值则直接返回await右侧的值
  6.          * 3.如果是修饰promise对象且对象为成功状态，则返回promise对象返回的值
  7.          * 4.如果是修饰promise对象且对象为失败状态，则返回异常，可用try/catch语句捕获
  8.          * 5.await会等右边的promise对象执行结束,然后再获取结果,后续代码也会等待await的执行 
  9.         */
  10.         async function fun1() {
  11.             throw new Error("错误")
  12.         }
  13.  
  14.         async function fun2() {
  15.             try{
  16.                 //let res = await "zhangsan"
  17.                 let res = await fun1()
  18.                 console.log(res)
  19.             } catch (e) {
  20.                 console.log(e)
  21.             }
  22.         }
  23.  
  24.         fun2()
  25.     </script>

 2. Axios

2.1 简介

Axios是一个基于Promise的网络请求库，它可以运行在浏览器和Node.js环境中。Axios本质上是对原生XHR（XMLHttpRequest）的封装，并使用Promise技术实现异步操作，这使得处理复杂的请求和响应更加简单和直观。

Axios的主要特点包括：

1. **支持浏览器和Node.js**：Axios既可以在浏览器中使用，也可以在Node.js环境中使用，提供了统一的API用于发起HTTP请求。
2. **Promise支持**：Axios基于Promise实现异步操作，这意味着你可以使用`.then()`和`.catch()`等方法来处理请求的成功和失败情况。
3. **拦截请求和响应**：Axios允许你在请求和响应被发送或接收时拦截它们，这样你可以进行自定义的处理，例如在请求发送前设置token，在响应处理后统一处理错误信息等。
4. **转换请求和响应数据**：Axios可以自动转换请求和响应的数据，例如自动将JSON数据转换成JavaScript对象。
5. **取消请求**：你可以使用Axios的取消功能来取消正在进行的请求。
6. **客户端防御XSRF**：Axios能够保护客户端免受跨站请求伪造（XSRF）的攻击。
7. **多种请求方式**：Axios支持多种HTTP请求方式，包括GET、POST、PUT、DELETE等，满足各种场景下的需求。

在使用Axios时，你可以使用不同的方式来发起请求。例如，你可以使用`axios(config)`方式，直接将相关配置（包括请求URL）作为参数传入到axios方法中；或者你也可以使用`axios(url[, config])`方式，第一个参数传入请求URL，第二个参数传入其他配置参数。

总的来说，Axios是一个功能强大且易于使用的网络请求库，它可以帮助你更轻松地处理HTTP请求和响应。

2.2 Hello World 

  1. <script setup>
  2. import {ref, reactive, onUpdated} from 'vue'
  3. import axios from 'axios'
  4.  
  5. let message = reactive(
  6.   {
  7.     code:0,
  8.     content:""
  9.   }
  10. )
  11.  
  12. function getMessage() {
  13.   //axios({}) 调用axios函数会返回一个promise对象
  14.   //请求三要素：请求方式method  请求路径url 请求参数keyvalue json ......
  15.   let promise = axios({
  16.     method:"get",
  17.     url:"https://api.uomg.com/api/rand.qinghua?format=json",
  18.     data:{
  19.       //这里的数据会放入请求体中，前提是以post方式提交
  20.     },
  21.     params:{
  22.       //这里的数据不论是以get/post方式提交都会以键值对的方式放入请求体中
  23.       format:"json",
  24.       username:"zhangsan"
  25.     }
  26.   })
  27.  
  28.   promise.then(
  29.     function(response) {
  30.       /**
  31.        * response响应报文对象：
  32.        * data:响应回来的信息
  33.        * config：配置信息
  34.        * data： code响应码  content响应内容
  35.        * headers：响应头
  36.        * request：请求配置信息
  37.        * status：请求状态码
  38.        * statusText：响应状态文本
  39.        */
  40.       console.log(response)
  41.       message.content = response.data.content
  42.     }
  43.   ).catch (
  44.     function(error) {
  45.  
  46.     }
  47.   )
  48. }
  49.  
  50. </script>
  51.  
  52. <template>
  53.   <div>
  54.    <h1>{{ message.content }}</h1>
  55.    <button @click="getMessage()">变</button>
  56.   </div>
  57. </template>
  58.  
  59. <style scoped>
  60.  
  61. </style>

 2.3 Axios get和post方法

get方法

/**

   * axios.get()基本用法:

   * axios.get(url, [, config])

   *

   * axios.get(url, {

   *  指定配置key:配置值，

   *  指定配置key:配置值

   * })

   *

   * 栗子：

   * axios.get(url)

   * axios.get(url, {params:{}, headers:{}})

   *

   * axios.post

   */

  1. try {
  2.     let response = await axios.get("https://api.uomg.com/api/rand.qinghua?", {
  3.       params: {
  4.         //向url后添加键值对参数
  5.         format: "JSON",
  6.         username: "zhangsan",
  7.         userpwd: "1233456"
  8.       },
  9.       headers: {
  10.         //设置请求头
  11.       }
  12.     })
  13.   } catch (error) {
  14.  
  15.   }

 post方法

/**

   * axios.post()基本用法：

   * axios.post(url[, data[, config]])

   *

   * axios.post(url, {自己配置key（如：username）:值}, {指定配置key（如：params）:{}})

   */

   /**

    * get和post语法区别：

    * get中自己配置的key可直接放入params中，而post中自己配置的键值对参数在一个大括号中单独书写

    */

  1. try {
  2.     let response = await axios.post("api/rand.qinghua?",
  3.       {
  4.         username: "zhangsna",
  5.         userpwd: "123456"
  6.       },
  7.       {
  8.         params: {
  9.           format: "JSON"
  10.         }
  11.       }
  12.     )
  13.     message.value = response.data.content
  14.   } catch (error) {
  15.  
  16.   }

 2.4 Axios拦截器

> 如果想在axios发送请求之前,或者是数据响应回来在执行then方法之前做一些额外的工作,可以通过拦截器完成 

  1. import axios from 'axios'
  2.  
  3. //创建axios对象
  4. const instance = axios.create({
  5.     baseURL:"https://api.uomg.com/",
  6.     timeout:10000
  7. })
  8.  
  9. //添加请求拦截器 请求发送之前
  10. //设置请求拦截
  11. instance.interceptors.request.use(
  12.     //设置请求成功处理
  13.     config => {
  14.         console.log("request before interceptors")
  15.         //请求成功必须返回配置对象，否则配置信息会丢失
  16.         return config
  17.     },
  18.     //设置请求失败处理
  19.     error => {
  20.         console.log("request error")
  21.         return Promise.reject(error)
  22.     }
  23. )
  24.  
  25. //添加回复拦截器 回复响应回来
  26. //设置回复拦截
  27. instance.interceptors.response.use(
  28.     //设置回复成功处理
  29.     response => {
  30.         console.log("response before insterceptors")
  31.         //回复成功必须返回回复报文对象，否则回复报文丢失
  32.         return response
  33.     },
  34.     //设置回复失败处理
  35.     error => {
  36.         console.log("response error")
  37.         return Promise.reject(error)
  38.     }
  39. )
  40.  
  41. //axios对外默认暴露
  42. export default instance

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/599019
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号