Axios

轻松启动

在学习axios之前，我们先安装axios的依赖（再一次体现vue是渐进式框架的特点）

npm install axios

---

从axios框架中导入axios

import axios from "axios";

注：axios使用的是默认暴露，导入时不需要加大括号

---

使用Axios设置请求的参数（请求三要素）

Axios的返回值是一个promise对象

function getLoveMessage() {
  let promise = axios({
    method: "get",
    url: "https://api.uomg.com/api/rand.qinghua?format=json",
    params: {
      // 如果请求方式是get，使用params中的数据会以键值对形式放入url后
      // 如果请求方式是post，使用params中的数据会以键值对形式放入url后
    },
    data: {
      // 如果请求方式是post，使用data中的数据会以JSON形式放入请求体中      
    }
  })

以上的请求方法会在下文简化

---

使用promise的API去解析响应结果对象

Object.assign(object1, object2) 可以将后一个对象的同名参数赋值给前一个对象的同名参数

promise.then(
  function (response) {
    Object.assign(message, response.data)
  }
).catch(
  function (error) {
    console.log(error)
  }
)

这里可以使用await来接受参数

let {data} = await promise // 使用解构表达式直接接收对象中所需的参数 从response对象中提取出data对象
Object.assign(message, data)

---

response 响应结果对象

• data：服务端响应回来的结果对象
  • 如果data是以JSON串的形式，会自动将其转换为对象
• status：响应状态码
• statusText：响应状态描述
• headers：本次响应的所有响应头
• config：本次请求的配置信息
• request：本次请求发送时所使用的XMLHttpRequest对象

Axios本质是使用Ajax的XMLHttpResquest的异步请求

---

Axios 请求方法

Axios.get()

使用Axios.get方法发送get请求，此方法中可以添加一些参数，返回值为一个promise对象

axios.get("url", {
  param: {键值对参数，被放在url的?后},
  headers: {请求头参数}
})

如果通过get请求指定url不添加任何参数时，可直接使用axios.get(“url”)

---

Axios.post()

使用Axios.post方法发送post请求，此方法中可以添加一些参数，返回值为一个promise对象

与get()方法不同，在url和其他参数中增加一个大括号，在这个大括号里可以写json串中，被放在请求体中作为post方法的参数

axios.post(
  "url", 
  {JSON},
  {
  param: {键值对参数},
  headers: {请求头参数}
  }
)

与get请求一样，如果不添加任何参数可以直接写成axios.post(“url”)

---

Axios请求方法简写

let promise = axios.get("https://api.uomg.com/api/rand.qinghua", {
  params: {format: "json"}
})

---

案例改写：每日情话

<script setup>

import axios from "axios";

import {reactive} from "vue"

let message = reactive({
  code: "",
  content: ""
})

async function getLoveMessage() {
  // 发送请求
  let promise = axios.get("https://api.uomg.com/api/rand.qinghua", {
    params: {format: "json"}
  })

  //接受响应
  let {data} = await promise // 使用解构表达式直接接收对象中所需的参数 从response对象中提取出data对象
  Object.assign(message, data)
}

</script>

<template>
  <div>
    <h1>{{ message.content }}</h1>
    <button @click="getLoveMessage()">获取每日情话</button>
  </div>
</template>

<style scoped>

</style>

---