Vue知识系列-axios

在Vue中，axios是一个非常流行的HTTP客户端，用于发送HTTP请求。以下是如何在Vue项目中使用axios的一些基本示例。

1. 安装axios

   首先，你需要在你的Vue项目中安装axios。如果你使用的是npm，你可以通过以下命令来安装：

npm install axios

2. 在Vue组件中使用axios

   在你的Vue组件中，你可以这样使用axios来发送HTTP GET请求：

<template>
  <div>
    <h1>User Data</h1>
    <p>{{ userData }}</p>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      userData: null
    };
  },
  created() {
    axios.get('https://jsonplaceholder.typicode.com/users/1')
      .then(response => {
        this.userData = response.data;
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
  }
};
</script>

在这个例子中，当组件被创建时，它会发送一个GET请求到指定的URL，并将响应数据存储在userData变量中。

3. 在Vuex中使用axios

   如果你在使用Vuex，你可能需要在action中使用axios来进行异步操作：

// store.js
import axios from 'axios';
 
const store = new Vuex.Store({
  state: {
    userData: null
  },
  actions: {
    fetchUserData({ commit }) {
      axios.get('https://jsonplaceholder.typicode.com/users/1')
        .then(response => {
          commit('setUserData', response.data);
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  },
  mutations: {
    setUserData(state, userData) {
      state.userData = userData;
    }
  }
});

在这个例子中，我们定义了一个actionfetchUserData，它会发送一个GET请求，然后在响应成功后，通过mutationsetUserData将数据存储到Vuex状态中。

4. 使用axios的配置

   axios允许你配置请求，例如设置baseURL，请求头，超时等：

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.timeout = 1000;
axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';
 
axios.get('/users/1')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

在这个例子中，我们设置了axios的默认配置，包括baseURL，超时时间和一个请求头。然后我们发送了一个GET请求到/users/1，axios会使用我们设置的这些默认配置。

5. 使用axios拦截器

   你可以使用axios的拦截器来在请求发送前和接收后做一些操作。例如，你可以在这里添加认证token：

axios.interceptors.request.use(config => {
  const token = 'YOUR_AUTH_TOKEN';
  config.headers.common['Authorization'] = `Bearer ${token}`;
  return config;
}, error => {
  return Promise.reject(error);
});
 
axios.inter