Vue.js - axios网络请求

1. 前言

Axios 是一个基于 Promise 的 HTTP 客户端，通常用于向服务器发送请求并处理响应。它广泛应用于前端开发中，尤其是在 Vue.js、React 等框架中，进行 API 请求和数据交互。

Axios 提供了简洁的 API，能够执行 GET、POST、PUT、DELETE 等 HTTP 请求，并且支持请求和响应的拦截、取消请求、跨域请求等功能。它非常适合与后端 API 进行通信，处理 JSON 数据，和前端数据绑定

2. Promise类型

2.1 response.data

包含服务器返回的实际数据（通常是 JSON 格式的数据）。这通常是我们最关心的信息。
例如：如果后端返回的是 { "status": "success", "message": "Logged in successfully" }，那么你可以通过 response.data 访问该数据。

2.2 response.status

HTTP 响应的状态码，表示请求的结果。
例如，200 表示请求成功，401 表示未经授权，500 表示服务器错误等。

2.3 response.statusText

HTTP 响应的状态文本，通常是一个简短的描述（例如，"OK" 或 "Unauthorized"）。
例如，当状态码是 200 时，通常是 "OK"。

2.4 response.headers

响应头部的信息，是一个包含响应头的对象。你可以用它来获取更多的服务器信息，比如 Content-Type、Authorization 等。
例如，response.headers['content-type'] 可以用来获取返回数据的类型。

2.5 response.config

请求的配置信息，是你在发送请求时传入的配置对象。比如请求的 url、method、headers 等。

2.6 response.request

这是原生的请求对象（例如 XMLHttpRequest 或 fetch），你可以用它来了解请求的底层实现和详细信息。

3. 基本用法

2.1 发送GET请求

GET请求用于从服务器中获取数据

javascript 复制代码

import axios from 'axios'

axios.get('https://www.xxx.com')
.then()
.catch()

then

通过使用get函数之后，如果请求成功，则会返回一个Promise对象，使用then函数进一步对promise对象处理请求成功之后的相应数据。如果失败，则catch方法获取其中的错误

javascript 复制代码

axios.get('https://www.xxx.com').then(回调函数)

then中接受一个回调函数，将服务器返回的响应数据作为参数传递给回调函数

可以使用常规函数形式进行书写，也可以通过箭头函数的形式书写

常规形式：

javascript 复制代码

axios.get('https://www.xxx.com').then(function(response){console.log('Heelo')}.catch(
function(error){'请求失败',error})

箭头函数形式：

javascript 复制代码

axios.get('https://www.xxx.com').then(response => {console.log(response.data})

传入response数据至函数当中，适合逻辑结构不复杂的回调函数使用,response.data获取promise对象中的数据，一般是我们想获取的数据结果，通常为JSON类型

2.2 发送post请求

POST请求用于向服务器发送数据，比如表单数据或JSON数据

javascript 复制代码

import axios from 'axios';

// 发送 POST 请求
axios.post('https://api.example.com/login', {
  username: 'user1',
  password: 'password123'
})
  .then(response => {
    console.log('响应数据:', response.data);        // 处理响应数据
    console.log('状态码:', response.status);        // HTTP 状态码（例如 200）
    console.log('状态文本:', response.statusText);  // 状态文本（例如 "OK"）
    console.log('响应头:', response.headers);       // 响应头（如 Content-Type 等）
    console.log('请求配置:', response.config);      // 请求的配置信息
  })
  .catch(error => {
    console.error('请求失败:', error);  // 处理请求错误
  });

2.3 配置请求

格式为在get函数之后声明以对象的形式，配置相应的信息即可

javascript 复制代码

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer token123'
  },
  timeout: 5000 // 请求超时设置为5秒
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

2.4 发送多个请求

如果需要发送多个请求需要使用Promise.all方法，传入一个数组包含多个axios请求

javascript 复制代码

Promise.all([axios.get("htps://xxxx"),axios.get("https://www")])

剩余步骤一致，使用then方法以及对应的回调函数，传入回调函数以数组形式进行传入

javascript 复制代码

<template>
  <h1>This is an example</h1>
  <button @click="request">Click to get more information</button>
  <p v-if="user1">{{ user1 }}</p>
  <p v-if="user2">{{ user2 }}</p>
</template>

<style>
/* 可以根据需要添加样式 */
</style>

<script>
  import axios from 'axios'
  import { ref } from 'vue'  // 使用 ref 来处理简单数据

  export default {
    setup() {
      // 使用 ref 创建响应式数据
      const user1 = ref(null);
      const user2 = ref(null);

      // 请求函数
      const request = () => {
        // 使用 Promise.all 来并行请求
        Promise.all([
          axios.get('https://api.example.com/data1'),
          axios.get('https://api.example.com/data2')
        ])
        .then(([response1, response2]) => {
          user1.value = response1.data;  // 更新响应式数据
          user2.value = response2.data;
        })
        .catch(error => {
          console.error('Error occurred:', error);
        });
      };

      return { user1, user2, request };
    }
  };
</script>