vue项目中使用axios封装接口

最新推荐文章于 2021-12-16 09:44:21 发布

qq_42951233

最新推荐文章于 2021-12-16 09:44:21 发布

阅读量173

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_42951233/article/details/114290522

版权

本文介绍如何在Vue项目中封装Axios库实现统一管理HTTP请求。通过创建自定义实例，设置请求超时时间，并利用拦截器进行请求及响应处理。文章详细展示了get和post请求的封装方式，同时为常见HTTP状态码提供了错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中使用axios封装接口

const instance = axios.create({ // 创建axios实例，在这里可以设置请求的默认配置
  timeout: 10000, // 设置超时时间10s
  baseURL: '', 
});

let httpCode = { // 这里我简单列出一些常见的http状态码信息，可以自己去调整配置
  400: '请求参数错误',
  401: '权限不足, 请重新登录',
  403: '服务器拒绝本次访问',
  404: '请求资源未找到',
  500: '内部服务器错误',
  501: '服务器不支持该请求中使用的方法',
  502: '网关错误',
  504: '网关超时',
};

/** 添加请求拦截器 **/
instance.interceptors.request.use((config) => {
  // config.headers.token = sessionStorage.getItem('token') || '';
  if (config.method === 'get') { // 添加时间戳参数，防止浏览器（IE）对get请求的缓存
    config.params = {
      ...config.params,
      // t: new Date().getTime(),
    };
  }
  return config;
}, (error) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

/** 添加响应拦截器  **/
instance.interceptors.response.use((response) => {
  if (response.data.code === 0) {
    return Promise.resolve(response.data.data);
  } if (response.status === 200) {
    return Promise.resolve(response.data);
  }
  return Promise.reject(response.data.msg);
}, (error) => {
  if (error.response) {
    // 根据请求失败的http状态码去给用户相应的提示
    let tips = error.response.code in httpCode ? httpCode[error.response.code] : error.response.data.msg;
    return Promise.reject(tips);
  }
  return Promise.reject(new Error('请求超时, 请刷新重试'));
});

/* 统一封装get请求 */
export const get = (url, params, config = {}) => {
  return new Promise((resolve, reject) => {
    instance({
      method: 'get',
      url,
      params,
      ...config,
    }).then((response) => {
      return resolve(response);
    }).catch((error) => {
      reject(error);
    });
  });
};

/* 统一封装post请求  */
export const post = (url, data, config = {}) => {
  return new Promise((resolve, reject) => {
    instance({
      method: 'post',
      url,
      data,
      ...config,
    }).then((response) => {
      return resolve(response);
    }).catch((error) => {
      reject(error);
    });
  });
};