axios二次封装

上干货、不墨迹

一、代码如下

import axios from 'axios';

const service = axios.create({
  timeout: 180000,
});

// application/json;charset=utf-8 application/x-www-form-urlencoded
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

service.interceptors.request.use(
  (config) => {
    if (/get/i.test(config.method)) {
      config.params = config.params || {};
    }

    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

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

// 封装的 get 方法
const serviceGet = (url, params) => {
  return service.get(url, { params });
};

// 封装的 post 方法
const servicePost = (url, params) => {
  return service.post(url, params);
};

// 封装的 delete 方法
const serviceDelete = (url, params) => {
  return service.delete(url, { params });
};

// 封装的 put 方法
const servicePut = (url, params) => {
  return service.put(url, params);
};

const servicePostJson = (url, data) =>
  axios({
    method: 'post',
    // 封装的 获取 token 的方法（可以单独封装，利用 sessionStorage 进行封装）
    headers: { token: getSessionToken() },
    url,
    data,
  });

const serviceJson = (url, data) =>
  axios({
    method: 'post',
    url,
    data,
    dataType: 'json',
    headers: {
      'Content-Type': 'application/json;charset=utf-8',
      token: getSessionToken(),
    },
  });

const serviceDeleteFormData = (url, data) =>
  axios({
    method: 'delete',
    url,
    data,
  });

const serviceGetFile = (url, params) =>
  axios({
    responseType: 'blob',
    method: 'get',
    url,
    params,
  });

export {
  service,
  serviceGet,
  servicePost,
  serviceDelete,
  servicePut,
  servicePostJson,
  serviceGetFile,
  serviceJson,
  serviceDeleteFormData,
};

二、使用方法 在 src下的 api 文件夹中调用 封装的方法就好

import {
  serviceGet,
  servicePost,
} from '@/utils/request';

// 应用封装的 get请求 和 post请求
export const developmentData = () => serviceGet('/api/data/develop');
export const importantProject = (data) =>servicePost('/api/data/keyProject', data);