使用 Axios 发送 Mock 请求

在 Vue.js 项目中，通常需要与服务器进行数据交互。axios 是一个流行的 HTTP 客户端库，能够在 Vue 应用中发送请求并处理响应。本文将介绍如何使用 axios 发送请求，并结合 Mock 数据模拟服务器响应。

1. Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它简化了与服务器的通信，并且支持多种请求方法，如 GET、POST、PUT、DELETE 等。Axios 默认返回一个 Promise，可以方便地进行异步操作。

1.1 安装 Axios

在 Vue.js 项目中，首先需要安装 axios：

npm install axios

安装完成后，可以在 Vue 组件中引入并使用 axios。

2. 发送 GET 请求

2.1 基本使用方法

使用 axios.get 方法发送 GET 请求。它的基本语法如下：

axios.get(url, config)
  .then(response => {
    console.log(response.data); // 请求成功，处理响应数据
  })
  .catch(error => {
    console.error(error); // 请求失败，处理错误
  });

2.2 代码案例：发送 GET 请求

以下是一个简单的 Vue 组件，演示如何使用 axios 发送 GET 请求并获取数据：

<template>
  <div>
    <h1>Mock 请求数据</h1>
    <p>响应数据：{{ responseData }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      responseData: null
    };
  },
  mounted() {
    // 发送 GET 请求
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => {
        this.responseData = response.data; // 获取并保存响应数据
      })
      .catch(error => {
        console.error('请求失败:', error); // 处理错误
      });
  }
}
</script>

解释：

axios.get('https://jsonplaceholder.typicode.com/posts/1') 发送 GET 请求到指定的 URL。
请求成功后，响应数据被保存到 responseData，并显示在页面上。
请求失败时，会打印错误信息。

3. 发送 POST 请求

3.1 基本使用方法

使用 axios.post 方法发送 POST 请求，它通常用于向服务器提交数据。基本语法如下：

axios.post(url, data, config)
  .then(response => {
    console.log(response.data); // 请求成功，处理响应数据
  })
  .catch(error => {
    console.error(error); // 请求失败，处理错误
  });

3.2 代码案例：发送 POST 请求

以下是一个发送 POST 请求的 Vue 组件，模拟提交数据到服务器：

<template>
  <div>
    <h1>提交数据</h1>
    <form @submit.prevent="submitData">
      <input v-model="title" placeholder="请输入标题" />
      <button type="submit">提交</button>
    </form>
    <p>提交结果：{{ postResponse }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      title: '',
      postResponse: null
    };
  },
  methods: {
    submitData() {
      // 发送 POST 请求，提交数据
      axios.post('https://jsonplaceholder.typicode.com/posts', {
        title: this.title,
        body: '这是一个提交的测试数据',
        userId: 1
      })
      .then(response => {
        this.postResponse = response.data; // 获取并显示响应数据
      })
      .catch(error => {
        console.error('请求失败:', error); // 处理错误
      });
    }
  }
}
</script>

解释：

用户在输入框中输入数据后，点击提交按钮，会调用 submitData 方法发送 POST 请求。
请求体 data 中包含了提交的数据，title 来自于用户输入，其他字段是模拟的数据。
请求成功后，响应数据会显示在页面上。

4. 使用 Mock 数据模拟响应

在开发过程中，有时我们需要模拟请求的返回数据，尤其是当后端接口尚未完成时。使用 Mock 服务可以模拟真实的 API 响应。

4.1 安装 Mock 服务

我们可以使用 json-server 来创建一个简单的 Mock API 服务。首先，通过 npm 安装：

npm install json-server --save-dev

然后，在项目根目录下创建一个 db.json 文件，作为 Mock 数据源：

{
  "posts": [
    { "id": 1, "title": "Mock 数据 1", "body": "内容 1" },
    { "id": 2, "title": "Mock 数据 2", "body": "内容 2" }
  ]
}

启动 Mock 服务：

npx json-server --watch db.json --port 3000

4.2 代码案例：使用 Axios 发送请求到 Mock 服务

修改 Vue 组件，使其从 Mock 服务中获取数据：

<template>
  <div>
    <h1>从 Mock 服务获取数据</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }} - {{ post.body }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: []
    };
  },
  mounted() {
    // 发送 GET 请求到 Mock 服务
    axios.get('http://localhost:3000/posts')
      .then(response => {
        this.posts = response.data; // 获取并展示 Mock 数据
      })
      .catch(error => {
        console.error('请求失败:', error); // 处理错误
      });
  }
}
</script>

解释：