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的参数1
            function() {
                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 10
            throw 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