vue axios封装httpjs,接口公用配置拦截操作

Vue.js 是一种流行的前端框架，它提供了很多有用的工具来简化前端开发。而 Axios 是一种非常流行的、基于 Promise 的 HTTP 客户端。在 Vue.js 中使用 Axios 需要进行一些额外的配置，对于许多开发者来说这可能会变得非常烦琐。因此，我们通常会使用一个叫做“axios 封装库”的工具来简化这个过程。

本篇攻略就是为了介绍如何使用 Axios 封装库来简化 Vue.js 中的 HTTP 请求，达到接口公用配置和拦截操作的效果。

一、安装 Axios

首先，在 Vue.js 项目中使用 Axios 需要安装 axios 包，可以通过 npm 命令来进行安装：

npm install axios --save

二、建立 Axios 封装库

可以创建一个名为 http.js 的文件，在其中封装 axios，提供统一的处理和公用的配置。

import axios from 'axios';

const instance = axios.create({
  // ... 公用配置
});

instance.interceptors.request.use(function(config) {
  // 在请求发送之前做一些处理
  // ...

  return config;
}, function(error) {
  // 对请求错误做些什么
  // ...

  return Promise.reject(error);
});

instance.interceptors.response.use(function(response) {
  // 在响应数据之前做一些处理
  // ...

  return response;
}, function(error) {
  // 对响应错误做些什么
  // ...

  return Promise.reject(error);
});

export default instance;

在这个文件中，我们首先使用 axios.create 方法创建了一个 Axios 实例，用来进行请求。然后使用 instance.interceptors.request 和 instance.interceptors.response 来对请求和响应进行拦截，做一些处理和错误处理。最后，导出这个实例。

这样，我们就可以在任何地方使用这个实例来进行 HTTP 请求。

三、使用 Axios 封装库

在基于 Vue.js 的项目中，经常会遇到需要进行 HTTP 请求的情况。使用 Axios 封装库可以使这个过程变得更加简单和方便。

下面是一个在 Vue.js 组件中使用 Axios 封装库的例子：

<template>
  <div>{{ message }}</div>
</template>

<script>
import http from "@/utils/http";

export default {
  data() {
    return {
      message: '',
    };
  },
  mounted() {
    http.get('https://jsonplaceholder.typicode.com/todos/1').then(response => {
      this.message = response.data.title;
    });
  },
};
</script>

在这个例子中，我们首先导入了我们刚才封装的 Axios 实例，然后在 mounted 钩子中使用这个实例进行 HTTP GET 请求。然后处理成功后，将得到的数据渲染到组件中。

四、进一步扩展

对于更复杂的应用，我们可以进一步扩展 Axios 封装库，增加一些通用的处理和配置。例如，我们可能需要添加请求超时处理、权限处理等等。

下面是一个放在 Axios 封装库中的请求超时处理和权限处理的示例：

import axios from 'axios';

const instance = axios.create({
  // ... 公用配置
});

instance.interceptors.request.use(function(config) {
  config.timeout = 10000; // 请求超时时间

  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

instance.interceptors.response.use(function(response) {
  // 在响应数据之前做一些处理
  // ...

  return response;
}, function(error) {
  // 对响应错误做些什么
  // ...

  if (error.response.status === 401) {
    // 无权限访问的处理
    // ...
  }

  return Promise.reject(error);
});

export default instance;

在这个示例中，我们增加了一个请求超时时间的处理和一个在请求头中添加 token，检查权限的处理。这些处理都是在请求拦截器中进行的。