博客

Vue中axios的封装（报错、鉴权、跳转、拦截、提示）

  • Post category:http

Vue中axios的封装是前端开发中常见的问题之一。封装可以使代码更加健壮，更加直观地处理错误、鉴权、跳转、拦截和提示等问题。本攻略将从以下几个方面详细讲解Vue中axios的封装方法。

安装axios

封装axios的前提是要先安装axios。可以通过npm命令进行安装。

npm install axios -S

需要注意的是，在使用axios之前，需要先对axios进行配置。Vue官网中一般建议使用Vue.prototype，以便在组件中可以直接使用this.$http进行请求。但在实际应用中，有些场景下axios的配置需要进行修改，这时候使用axios.create可以更加灵活地进行配置。

axios配置

axios最常使用的配置有以下几个：

设置请求超时时间：

axios.defaults.timeout = 10000;

设置请求的baseUrl：

axios.defaults.baseURL = 'http://api.example.com';

设置请求头：

axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

设置响应拦截器：

axios.interceptors.response.use(
  response => {
    // 处理响应数据
    return response.data;
  },
  error => {
    // 处理错误信息
    return Promise.reject(error);
  }
);

以上是axios最常用的配置，下面将详细介绍如何使用axios进行鉴权、跳转、拦截和提示等操作。

鉴权

在实际项目中，鉴权可以使用token验证，而token通常存储在浏览器的cookie或localStorage中。鉴权的方法一般是在请求头中添加Authorization字段，将token传递给服务器进行验证。封装后的axios可以在请求头中添加Authorization字段，代码如下：

const axiosInstance = axios.create({
  timeout: 10000,
  baseURL: 'http://api.example.com',
});

axiosInstance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

上例中，定义了一个axios的实例axiosInstance，并在请求拦截器中添加Authorization字段，将存储在localStorage中的token添加到请求头中。

跳转

在登录状态失效时，通常需要跳转到登录界面进行重新登录。封装后的axios可以在某些特定的响应码下进行跳转操作，代码如下：

axiosInstance.interceptors.response.use(
  response => {
    // 处理响应数据
    return response.data;
  },
  error => {
    if (error.response && error.response.status === 401) {
      // 跳转到登录界面
      router.push('/login');
      return Promise.reject(error);
    }
    return Promise.reject(error);
  }
);

上例中，如果响应码为401（即未授权访问），则跳转到登录界面。

拦截

在实际项目中，有些请求需要进行特定的拦截处理，例如get请求需要拼接url参数，post请求需要传递body参数等等。因此在封装后的axios中，可以对不同的请求进行拦截处理。以下是拦截get请求并拼接url参数的示例代码：

/**
 * 拦截get请求，拼接url参数
 * @param {String} url 请求的url地址
 * @param {Object} params 请求的参数对象
 */
const formatUrl = (url, params) => {
  let queryString = '';
  if (params) {
    for (let key in params) {
      let value = params[key] !== undefined ? params[key] : '';
      queryString += `&${key}=${encodeURIComponent(value)}`;
    }
    if (queryString) {
      queryString = queryString.substring(1);
      url += `${url.includes('?') ? '&' : '?'}${queryString}`;
    }
  }
  return url;
};

axiosInstance.interceptors.request.use(
  config => {
    if (config.method === 'get' && config.params) {
      config.url = formatUrl(config.url, config.params);
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

上例中，定义了一个格式化url参数的方法formatUrl，并在请求拦截器中，如果是get请求，且带有参数，则调用formatUrl方法进行url参数的拼接操作。

提示

在请求过程中，可能需要对用户进行一些提示，例如请求过程中加载loading图标，请求结束后关闭loading图标等。封装后的axios可以处理这些提示信息。以下是一个显示loading图标的示例：

/**
 * 显示loading组件
 */
const showLoading = () => {
  // 显示loading组件
};

/**
 * 隐藏loading组件
 */
const hideLoading = () => {
  // 隐藏loading组件
};

axiosInstance.interceptors.request.use(
  config => {
    showLoading();
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

axiosInstance.interceptors.response.use(
  response => {
    hideLoading();
    return response.data;
  },
  error => {
    hideLoading();
    return Promise.reject(error);
  }
);

上例中，定义了showLoading和hideLoading方法，在请求拦截器和响应拦截器中分别调用这两个方法，显示和隐藏loading图标，以提示用户请求正在进行中。

Tags: