Vue和Axios的数据请求拦截器与全局配置

1. Vue和Axios介绍

Vue.js是一套构建用户界面的框架，提供了数据绑定和组件化的思想，使得构建大型、高性能的Web应用变得更加容易。Axios是一个基于Promise的HTTP客户端，可同时在浏览器和Node.js环境下使用。

2. Axios全局配置

Axios提供了全局配置的方式来更改默认的请求选项。可以在创建实例之前，使用Axios.defaults来更改配置。

2.1 设置基础URL

可以通过设置基础URL来减少重复的请求URL。可以使用Axios.defaults.baseURL来设置基础URL。

// 设置基础URL
Axios.defaults.baseURL = 'https://some-domain.com/api/'
// 发送请求
Axios.get('/user?ID=12345')

2.2 设置默认请求头信息

在发送请求时，可以设置一些请求头信息，如Content-Type等。可以使用Axios.defaults.headers来设置默认请求头信息。

// 设置默认请求头信息
Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 发送请求
Axios.get('/user', {
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  }
});

2.3 设置超时时间

可以通过设置超时时间来配置请求的最长等待时间，可以用Axios.defaults.timeout来设置超时时间。当请求超时时，请求将被取消。

// 设置超时时间
Axios.defaults.timeout = 10000;
// 发送请求
Axios.get('/user', {
  timeout: 5000
});

3. Axios数据请求拦截器

Axios提供了拦截器的方式来拦截HTTP请求和响应。可以在发送请求或者接收响应之前或者之后对请求或响应进行处理。可以使用interceptors来定义拦截器。

3.1 请求拦截器

请求拦截器用来设置请求头信息和请求参数等。请求拦截器可以在发送请求之前对请求进行处理。

// 请求拦截器
Axios.interceptors.request.use(
  config => {
    // 设置请求头信息
    config.headers.common['Authorization'] = AUTH_TOKEN;
    return config;
  },
  error => {
    // 发生错误时进行处理
    return Promise.reject(error);
  }
)
// 发送请求
Axios.get('/user', {
  params: {
    ID: 12345
  }
});

3.2 响应拦截器

响应拦截器用来处理服务器返回的响应数据。响应拦截器可以在服务器响应之后对响应进行处理。

// 响应拦截器
Axios.interceptors.response.use(
  response => {
    // 处理服务器响应数据
    return response.data;
  },
  error => {
    // 处理服务器响应错误
    return Promise.reject(error);
  }
)
// 发送请求
Axios.get('/user', {
  params: {
    ID: 12345
  }
}).then(data => {
  // 处理响应数据
}).catch(err => {
  // 处理响应错误
});

4. 实例代码

下面是一个例子，演示如何使用Axios全局配置和拦截器。

import Axios from 'axios';
// 设置基础URL
Axios.defaults.baseURL = 'https://api.example.com/';
// 在请求发送之前拦截请求
Axios.interceptors.request.use(
  config => {
    // 如果有token，携带token发送请求
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.common['Authorization'] = 'Bearer ' + token;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
)
// 在服务器响应之后拦截响应
Axios.interceptors.response.use(
  response => {
    // 处理响应数据
    return response.data;
  },
  error => {
    // 处理响应错误
    return Promise.reject(error);
  }
)
// 发送请求
Axios.get('/user', {
  params: {
    ID: 12345
  }
}).then(data => {
  // 处理响应数据
}).catch(err => {
  // 处理响应错误
});

总之，Axios提供了全局配置和拦截器的方式来自定义HTTP请求和响应。使用Axios全局配置和拦截器，可以减少重复的代码和错误，并且可以在请求或响应之前或之后对它们进行自定义操作，从而让编写Web应用变得更加容易。