Axios基本使用

Axios是一个基于Promise的HTTP客户端，用于进行网络请求。下面是使用Axios发送GET和POST请求的简单示例：

一、Axios简单代码举例

首先，你需要在项目中安装axios。可以使用npm或者yarn进行安装：

npm install axios

或者

yarn add axios

接下来，在你的项目代码中引入axios：

import axios from 'axios';

发送GET请求的示例：

axios.get('https://api.example.com/data')
  .then(response => {
    // 请求成功，处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败，处理错误信息
    console.error(error);
  });

发送POST请求的示例：

axios.post('https://api.example.com/data', { name: 'John', age: 25 })
  .then(response => {
    // 请求成功，处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败，处理错误信息
    console.error(error);
  });

以上示例中，https://api.example.com/data是你要请求的URL地址。

在GET请求中，可以通过response.data访问响应数据；在POST请求中，可以通过response.data访问返回的数据。

二、Axios脚手架中代码举例

<template>
  <div>
    <p>{{ message.code }}</p>
    <h3>{{ message.content }}</h3> 
    <button @click="getMessage()">刷新</button>
  </div>
</template>
<script setup>
import axios from 'axios'
import { reactive } from 'vue';
const message = reactive({
  "code":'',
  "content":''
})
function getMessage() {
  //使用axios发送请求 
  axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
  .then(result => {
    // 请求成功，处理响应数据
    Object.assign(message,result.data); 
  })
  .catch(error => {
    // 请求失败，处理错误信息
    console.error(error);
  });
}
</script>
<style lang="scss" scoped></style>

三、axios API

1、可以通过向 axios 传递相关配置来创建请求

axios(config)

axios({
  method: 'get',
  url: '.....',
  data: {
    code:1,
    content:"你好"
  }
});

2、在脚手架项目中使用

<template>
  <div>
    <p>{{ message.code }}</p>
    <h3>{{ message.content }}</h3> 
    <button @click="getMessage()">刷新</button>
  </div>
</template>

<script setup>
import axios from 'axios'
import { reactive } from 'vue';
const message = reactive({
  "code":'',
  "content":''
})
function getMessage() {
  //使用axios发送请求 
  // 请求三要素，1、请求的URL，2、请求的方式，3、请求的参数
  let promise = axios({ 
    method: 'get',
    url: 'https://api.uomg.comssss/api/rand.qinghua',
    data: {
      //如果请求方式是get，则data中的数据会 以键值对形式放在url后
      // 如果请求方式post，则data中的数据会 以JSOn形式放入请求体中
    }
  })//这里会返回一个promise
  promise.then((result) => {
    Object.assign(message,result.data); 
    //后面的对象会赋值给前面的对象
    //不过 是赋值给同名的属性值
  }).catch((err) => {
    console.log("出现异常,找不到资源");
    console.log(err);
  });
}
</script>
<style lang="scss" scoped></style>

method是get，那么data中若是这样：

 data: {
      format:"json",
      username:"zhansang"
 }

就会变成键值对，加上一个 ? 拼接在url的后面

然而，并不行，打开谷歌浏览器，网络查看请求：发现并没有

键值对的话，不是用data:{}，而是用params

这样，我们就能够看到了，是成功拿到了键值对，标头和载荷都可以看到。

如果将method 改成 post的话，看到的，依旧是键值对，所以post，得是data:{}，才能拿到json格式。