自定义 HTTP Vue 2

Vue 2.x 是一个流行的前端框架，它提供了强大的数据绑定、组件化和路由处理功能。在本教程中，我们将学习如何自定义 HTTP 请求，以便在 Vue 应用程序中获取数据和与后端交互。

Ajax 请求

Vue 官方提供了一个插件 vue-resource 来处理 HTTP 请求和 RESTful API，它基于 Ajax 规范，并提供了一些特殊功能如拦截器、缓存和 JSONP。但是，vue-resource 已经停止更新，我们不再推荐使用它。

在 Vue 2.x 中，我们可以使用浏览器原生的 XMLHttpRequest 对象或第三方库如 axios、fetch 来发起请求。下面是一个使用 axios 库的例子。

import axios from 'axios';

const url = 'https://jsonplaceholder.typicode.com/posts';

export default {
  data() {
    return {
      posts: []
    };
  },
  mounted() {
    axios.get(url).then(response => {
      this.posts = response.data;
    });
  }
};

在上面的例子中，我们使用 axios 库发起 GET 请求，调用 then() 方法处理响应数据，并将其保存到 posts 数据属性中。在 Vue 组件中，我们可以使用 data 属性来初始化数据，使用 mounted 生命周期钩子发起请求。

自定义 Axios 实例

如果我们在项目中有多个请求需要处理，或者我们需要使用自定义配置如请求头或请求拦截器，那么可以使用自定义的 axios 实例来处理。

下面是一个使用自定义 axios 实例的例子。

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  headers: {
    'Content-Type': 'application/json'
  }
});

export default {
  data() {
    return {
      post: {},
      comments: []
    };
  },
  mounted() {
    api.get('/posts/1').then(response => {
      this.post = response.data;
    });

    api.get('/posts/1/comments').then(response => {
      this.comments = response.data;
    });
  }
};

在上面的例子中，我们使用 axios.create() 方法创建了一个名为 api 的 axios 实例，并配置了其 baseUrl 和 headers 属性。在 mounted 生命周期钩子中，我们分别发起两个请求来获取帖子和评论数据。

使用 Axios 拦截器

axios 提供了拦截器来处理请求和响应。拦截器可以对请求进行修改、添加请求头或参数，也可以对响应进行处理和错误处理。

下面是一个使用 axios 拦截器的例子，我们在请求头中添加了一个授权令牌，并在响应时对返回数据进行了处理。

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com'
});

api.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer ' + getToken();
  return config;
});

api.interceptors.response.use(response => {
  if (response.status === 200) {
    return response.data;
  } else {
    return Promise.reject(new Error(response.statusText));
  }
});

export default {
  data() {
    return {
      posts: []
    };
  },
  mounted() {
    api.get('/posts').then(posts => {
      this.posts = posts;
    }).catch(error => {
      console.error(error);
    });
  }
};

在上面的例子中，我们使用 api.interceptors.request.use() 方法在请求中添加了授权令牌，并使用 api.interceptors.response.use() 方法对响应进行处理和错误处理。在组件中，我们可以使用 api.get() 方法来发起请求，并使用 catch() 方法处理错误。

总结

在本教程中，我们学习了如何在 Vue 2.x 中自定义 HTTP 请求，包括使用浏览器原生的 XMLHttpRequest 对象、axios 库和自定义 axios 实例，以及使用拦截器来处理请求和响应。HTTP 请求是前端开发中必不可少的一部分，掌握好 HTTP 请求的技巧可以更好地与后端进行协作。