第8篇：Vue 网络请求与 Axios

在前面的章节中，我们学习了 Vuex 状态管理。本篇将学习如何使用 Axios 进行网络请求，从而获取和提交数据。

1. 什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，它可以在浏览器和 Node.js 中使用，主要用于发起 HTTP 请求并处理响应。

Axios 的特点：

• 支持 Promise API。
• 支持请求与响应拦截器。
• 支持请求数据与响应数据的转换。
• 支持取消请求。
• 支持跨浏览器兼容。

2. 安装 Axios

使用以下命令安装 Axios：

npm install axios

3. 基本使用示例

在组件中导入 Axios 并发送网络请求：

<template>
  <div>
    <h1>Axios 请求示例</h1>
    <button @click="fetchData">获取数据</button>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: []
    };
  },
  methods: {
    fetchData() {
      axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
          this.posts = response.data;
        })
        .catch(error => {
          console.error('请求出错：', error);
        });
    }
  }
};
</script>

<style scoped>
button {
  margin: 10px 0;
  padding: 10px 15px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

解释：

• axios.get：发起 GET 请求获取数据。
• response.data：服务器返回的数据。
• catch：捕获请求错误。

4. 发送 POST 请求

POST 请求用于提交数据到服务器。

<template>
  <div>
    <h1>POST 请求示例</h1>
    <input v-model="newPost.title" placeholder="输入标题" />
    <button @click="addPost">提交数据</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      newPost: {
        title: ''
      }
    };
  },
  methods: {
    addPost() {
      axios.post('https://jsonplaceholder.typicode.com/posts', this.newPost)
        .then(response => {
          console.log('提交成功：', response.data);
          alert('数据提交成功！');
        })
        .catch(error => {
          console.error('请求出错：', error);
        });
    }
  }
};
</script>

<style scoped>
input {
  padding: 5px 10px;
  margin-right: 10px;
  font-size: 16px;
}
button {
  padding: 5px 10px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

解释：

• axios.post：向服务器提交数据。
• 请求体数据通过 this.newPost 传递。

5. Axios 全局配置

可以在项目的入口文件中对 Axios 进行全局配置，例如设置基础 URL 和请求超时。

// src/axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com/',
  timeout: 5000 // 超时时间
});

export default instance;

在组件中使用配置好的实例：

<script>
import axios from '@/axios';

export default {
  methods: {
    fetchData() {
      axios.get('/posts')
        .then(response => {
          console.log(response.data);
        });
    }
  }
};
</script>

6. 请求与响应拦截器

拦截器可以在请求发送之前和响应返回之前执行操作。

// 添加请求拦截器
axios.interceptors.request.use(config => {
  console.log('请求发送前：', config);
  return config;
}, error => {
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  console.log('响应接收：', response);
  return response;
}, error => {
  return Promise.reject(error);
});

7. 总结

在本篇中，你学习了：

• 如何安装和使用 Axios 发起 GET 和 POST 请求。
• 如何进行全局配置和设置基础 URL。
• 如何使用拦截器处理请求和响应。

下一篇中，我们将学习 Vue 的性能优化与最佳实践。