【Vue】深入了解 Axios 在 Vue 中的使用：从基本操作到高级用法的全面指南

文章目录

- [一、Axios 简介与安装](#一、Axios 简介与安装)
- - [1. 什么是 Axios？](#1. 什么是 Axios？)
  - [2. 安装 Axios](#2. 安装 Axios)
- [二、在 Vue 组件中使用 Axios](#二、在 Vue 组件中使用 Axios)
- - [1. 发送 GET 请求](#1. 发送 GET 请求)
  - [2. 发送 POST 请求](#2. 发送 POST 请求)
- [三、Axios 拦截器](#三、Axios 拦截器)
- - [1. 请求拦截器](#1. 请求拦截器)
  - [2. 响应拦截器](#2. 响应拦截器)
- 四、错误处理
- [五、与 Vuex 结合使用](#五、与 Vuex 结合使用)
- - [1. 在 Vuex 中定义 actions](#1. 在 Vuex 中定义 actions)
  - [2. 在组件中调用 Vuex actions](#2. 在组件中调用 Vuex actions)
- 六、处理并发请求

在 Vue.js 开发中，Axios 是一个非常流行的 HTTP 客户端，用于发送请求和处理响应。它是基于 Promise 的，可以更方便地处理异步操作。本文将详细介绍如何在 Vue 项目中使用 Axios，包括安装、基本用法、拦截器、错误处理、和与 Vuex 的结合等。通过全面了解这些内容，你将能够更高效地进行前后端数据交互。

一、Axios 简介与安装

1. 什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js。它提供了一系列便捷的方法来发送 HTTP 请求（GET、POST、PUT、DELETE 等）并处理响应数据。

2. 安装 Axios

要在 Vue 项目中使用 Axios，可以通过 npm 或 yarn 安装：

bash 复制代码

# 使用 npm 安装
npm install axios

# 使用 yarn 安装
yarn add axios

安装完成后，可以在 Vue 组件中导入 Axios 并进行使用。

二、在 Vue 组件中使用 Axios

1. 发送 GET 请求

以下是一个使用 Axios 发送 GET 请求并在 Vue 组件中展示数据的示例：

html 复制代码

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error('发生错误:', error);
      });
  }
}
</script>

在这个示例中，axios.get 方法发送一个 GET 请求到指定的 URL，并将返回的数据赋值给 users 数组。

2. 发送 POST 请求

以下是一个发送 POST 请求的示例：

html 复制代码

<template>
  <div>
    <h1>创建新用户</h1>
    <form @submit.prevent="createUser">
      <input v-model="newUser.name" placeholder="姓名">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      newUser: {
        name: ''
      }
    }
  },
  methods: {
    createUser() {
      axios.post('https://jsonplaceholder.typicode.com/users', this.newUser)
        .then(response => {
          console.log('用户创建成功:', response.data);
        })
        .catch(error => {
          console.error('发生错误:', error);
        });
    }
  }
}
</script>

在这个示例中，axios.post 方法发送一个 POST 请求，将 newUser 数据提交到指定的 URL。

三、Axios 拦截器

Axios 提供了请求拦截器和响应拦截器，可以在请求发送或响应返回之前进行处理。

1. 请求拦截器

请求拦截器可以用于在请求发送之前对请求进行修改，例如添加认证 token：

js 复制代码

axios.interceptors.request.use(config => {
  // 在请求头中添加 Authorization
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, error => {
  return Promise.reject(error);
});

2. 响应拦截器

响应拦截器可以用于在响应返回之后对响应进行处理，例如统一处理错误信息：

js 复制代码

axios.interceptors.response.use(response => {
  return response;
}, error => {
  console.error('响应错误:', error.response);
  return Promise.reject(error);
});

四、错误处理

在使用 Axios 进行请求时，错误处理是非常重要的。可以在 .catch 方法中处理错误：

js 复制代码

axios.get('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    this.users = response.data;
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了一个状态码，表示请求失败
      console.error('错误状态码:', error.response.status);
      console.error('错误数据:', error.response.data);
    } else if (error.request) {
      // 请求已发送，但没有收到响应
      console.error('请求错误:', error.request);
    } else {
      // 其他错误
      console.error('错误信息:', error.message);
    }
  });

五、与 Vuex 结合使用

在大型应用中，通常会使用 Vuex 来管理应用的状态。可以将 Axios 请求放入 Vuex actions 中，以便更好地管理数据流。

1. 在 Vuex 中定义 actions

以下是一个在 Vuex 中使用 Axios 的示例：

js 复制代码

import axios from 'axios';

const state = {
  users: []
};

const mutations = {
  SET_USERS(state, users) {
    state.users = users;
  }
};

const actions = {
  fetchUsers({ commit }) {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(response => {
        commit('SET_USERS', response.data);
      })
      .catch(error => {
        console.error('发生错误:', error);
      });
  }
};

export default {
  state,
  mutations,
  actions
};

2. 在组件中调用 Vuex actions

在组件中调用 Vuex actions：

html 复制代码

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['users'])
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    ...mapActions(['fetchUsers'])
  }
}
</script>

在这个示例中，fetchUsers action 会在组件创建时被调用，并将用户数据保存到 Vuex 的状态中。

六、处理并发请求

有时需要同时发送多个请求，并在所有请求完成后进行处理。Axios 提供了 axios.all 和 axios.spread 方法来处理这种情况。

js 复制代码

axios.all([
  axios.get('https://jsonplaceholder.typicode.com/users'),
  axios.get('https://jsonplaceholder.typicode.com/posts')
])
.then(axios.spread((usersResponse, postsResponse) => {
  console.log('用户数据:', usersResponse.data);
  console.log('文章数据:', postsResponse.data);
}))
.catch(error => {
  console.error('发生错误:', error);
});

在这个示例中，axios.all 发送了两个并发请求，axios.spread 用于在所有请求完成后分别处理每个响应。