vue项目中使用axios封装接口

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);
    });
  });
};