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. 基本用法 

<script>//基础用法console.log("code1执行")/*** 参数1：resovle函数是成功结果* 参数2：reject函数是失败结果*///创建promise对象let promise = new Promise(function(resolve, reject) {console.log("promise执行")resolve()//reject()})promise.then(//调用promise时会根据上面放行结果执行函数1还是函数2//当上面调用resolve()函数时会执行then的参数1function() {console.log("promise resolve")},//当上面调用reject()函数时会执行then的参数二function() {console.log("promise reject")})console.log("code2执行")</script>

 1.3 Promise catch()用法

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

<script>//catch用法console.log("code1执行")//创建promise对象let promise = new Promise(function (resolve, reject) {console.log("调用promise啦")throw new Error("promise抛出异常")})//当执行结果为成功时会执行下面的函数promise.then(function() {console.log("promise resolve")}//当执行结果为失败或者有异常时会执行catch里面的函数).catch(function(error) {console.log(error)})console.log("code2执行")</script>

 1.4 async关键字

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

<script>console.log("async关键字1")/*** async：* 通过async关键字可简洁的创建promise对象* 1.async修饰的函数调用后若函数返回结果为非promise对象，则会创建一个resolve结果的promise对象* 2.async修饰的函数调用后若函数返回结果为prmoise对象，则此时async函数返回的结果由该对象的状态决定* 3.若async修饰的函数抛出异常，则会返回一个reject结果的promise对象*/async function fun1() {console.log("async关键字创建promise对象啦")//当正常返回结果时会执行resolve结果的函数//return 10throw new Error("返回异常")}//调用async关键字修饰的函数会返回一个promise对象let promise = fun1()promise.then(//若函数正常返回结果即执行resolve函数//可以在执行reslolve结果的函数中使用参数接收返回结果，此时value即返回结果function(value) {console.log("resolve:" + value)}).catch(function(error) {console.log("reject/exceptin:" + error)})console.log("async关键字2")</script>

 1.5 await关键字

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

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

<script setup>
import {ref, reactive, onUpdated} from 'vue'
import axios from 'axios'let message = reactive({code:0,content:""}
)function getMessage() {//axios({}) 调用axios函数会返回一个promise对象//请求三要素：请求方式method  请求路径url 请求参数keyvalue json ......let promise = axios({method:"get",url:"https://api.uomg.com/api/rand.qinghua?format=json",data:{//这里的数据会放入请求体中，前提是以post方式提交},params:{//这里的数据不论是以get/post方式提交都会以键值对的方式放入请求体中format:"json",username:"zhangsan"}})promise.then(function(response) {/*** response响应报文对象：* data:响应回来的信息* config：配置信息* data： code响应码  content响应内容* headers：响应头* request：请求配置信息* status：请求状态码* statusText：响应状态文本*/console.log(response)message.content = response.data.content}).catch (function(error) {})
}</script><template><div><h1>{{ message.content }}</h1><button @click="getMessage()">变</button></div>
</template><style scoped></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

   */

try {let response = await axios.get("https://api.uomg.com/api/rand.qinghua?", {params: {//向url后添加键值对参数format: "JSON",username: "zhangsan",userpwd: "1233456"},headers: {//设置请求头}})} catch (error) {}

 post方法

/**

   * axios.post()基本用法：

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

   *

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

   */

   /**

    * get和post语法区别：

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

    */

 

try {let response = await axios.post("api/rand.qinghua?",{username: "zhangsna",userpwd: "123456"},{params: {format: "JSON"}})message.value = response.data.content} catch (error) {}

 2.4 Axios拦截器

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

import axios from 'axios'//创建axios对象
const instance = axios.create({baseURL:"https://api.uomg.com/",timeout:10000
})//添加请求拦截器 请求发送之前
//设置请求拦截
instance.interceptors.request.use(//设置请求成功处理config => {console.log("request before interceptors")//请求成功必须返回配置对象，否则配置信息会丢失return config},//设置请求失败处理error => {console.log("request error")return Promise.reject(error)}
)//添加回复拦截器 回复响应回来
//设置回复拦截
instance.interceptors.response.use(//设置回复成功处理response => {console.log("response before insterceptors")//回复成功必须返回回复报文对象，否则回复报文丢失return response},//设置回复失败处理error => {console.log("response error")return Promise.reject(error)}
)//axios对外默认暴露
export default instance