Vue.js axios异步请求

在 Vue.js 中，axios 是一款非常流行的 HTTP 客户端库，可以用来发送异步 HTTP 请求（如 GET、POST、PUT、DELETE 等），与服务器进行交互。通常我们用它来获取数据、提交表单或处理其他后端 API 请求。

以下是关于在 Vue.js 中使用 axios 的详细指南：

---

1. 安装 axios

如果你正在使用 Vue CLI 构建项目，可以通过 npm 或 yarn 安装 axios：

bash

npm install axios
# 或者
yarn add axios

或者在使用 CDN 的情况下，可以通过引入 axios 的 CDN 地址：

HTML

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

安装完成后，axios 就可以直接使用了。

---

2. 基本用法

axios 是基于 Promise 的，可以通过 .then() 和 .catch() 处理异步请求：

a) GET 请求

JavaScript

// 引入 axios（如果是全局引入，下面一行可以省略）
import axios from 'axios';

export default {
  data() {
    return {
      posts: [] // 用于存储返回的数据
    };
  },
  methods: {
    fetchPosts() {
      axios
        .get('https://jsonplaceholder.typicode.com/posts') // API URL
        .then(response => {
          console.log(response);
          this.posts = response.data; // 把获取的数据赋值给 posts
        })
        .catch(