axios封装 - vue

下载axios

 官网：axios中文网|axios API 中文文档 | axios

npm i axios

 在request文件夹中创建http.js、config.js、api.js文件对axios进行封装操作

1.http.js文件（封装请求方法及axios相关配置处理）

/*eslint-disable*/
import axios from "axios";
import { Message } from "element-ui";

import router from "@/router";

// 环境转换
if (process.env.NODE_ENV === "development") {
  axios.defaults.baseURL = "/api";
} else if (process.env.NODE_ENV === "debug") {
  axios.defaults.baseURL = "";
} else if (process.env.NODE_ENV === "production") {
  axios.defaults.baseURL = window.config.baseUrl;
}
// 配置请求头
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";

// 请求超时秒数
axios.defaults.timeout = 30000;

// 携带cookies
axios.defaults.withCredentials = true;

// post请求头
axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";


// 通用方法
export const POST = (url, params) => {
  return new Promise((resolve, reject) => {
    axios
      .post(url, params)
      .then(res => {
        resolve(res.data.data);
      })
      .catch(err => {
        reject(err);
      });
  });
};

export const GET = (url, params) => {
  return new Promise((resolve, reject) => {
    axios
      .get(url, { params: params })
      .then(res => {
        resolve(res.data.data);
      })
      .catch(err => {
        reject(err);
      });
  });
};
export const GETBLOB = (url, params) => {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params,
        responseType: "blob" // 声明返回blob格式
      })
      .then(res => {
        resolve(res);
      })
      .catch(err => {
        reject(err);
      });
  });
};

export const FORM_POST = (url, params) => {
  let timeout = parseInt(300000);
  return new Promise((resolve, reject) => {
    axios
      .post(
        url,
        params,
        { timeout: timeout },
        {
          headers: {
            "Content-Type":
              "multipart/form-data; boundary=<calculated when request is sent>"
          }
        }
      )
      .then(res => {
        resolve(res.data.data);
      })
      .catch(err => {
        reject(err);
      });
  });
};

export const DOWNLOAD = (url, params) => {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params,
        responseType: "blob" // 声明返回blob格式
      })
      .then(res => {
        resolve(res);
      })
      .catch(err => {
        reject(err);
      });
  });
};

export const PUT = (url, params) => {
  return new Promise((resolve, reject) => {
    axios.put(url, params)
      .then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err.response.statusText)
      })
  })
}

export const DELETE = (url, params) => {
  return new Promise((resolve, reject) => {
    axios
      .delete(url, { params: params })
      .then(res => {
        resolve(res.data.data);
      })
      .catch(err => {
        reject(err.response.statusText);
      });
  });
};

export const PATCH = (url, params) => {
  return new Promise((resolve, reject) => {
    axios.patch(url, params)
      .then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err.response.statusText)
      })
  })
}

export default axios;

如需配置拦截器可参考：

// http request拦截器 添加一个请求拦截器
axios.interceptors.request.use(
  function(config) {
    // let token = window.localStorage.getItem('token')
    // if (token) {
    //   // 将token放到请求头发送给服务器,将tokenkey放在请求头中
    //   config.headers.token = token
    //   // 也可以这种写法
    //   // config.headers['token'] = token;
    // }
    let part = JSON.parse(window.sessionStorage.getItem("selectPartInfo"));
    // console.log('header请求头', part)
    if (part && part.part) {
      let belongOrg = part.part.belongOrg;
      // console.log('header请求头的type:', type)
      config.headers["belongOrg"] = belongOrg;
    } else {
      config.headers["belongOrg"] = "1";
    }
    return config;
  },
  function(error) {
    Message.error("请求超时");
    // Do something with request error
    return Promise.reject(error);
  }
);

// 添加一个响应拦截器
axios.interceptors.response.use(
  function(res) {
    const code = res.status;
    if (res.data.ret === 302 && router.history.current.name !== "oa") {
      var url = res.data.redirectUrl;
      sessionStorage.removeItem("selectPartInfo");
      window.location = url;

      // 使用vue的api接口获取当前页面的路由信息，例如获得如下值
      var hash = window.location.pathname;
      // 解析url中的redirect参数，并使用decodeURIComponent获取真实的redirect，例如
      // var redirect = 'http://1.2.3.4:8880/web/'
      var redirect = url.split("redirect=")[1];

      // 将hash拼接到redirect后，再使用 encodeURIComponent转义，例如
      redirect = encodeURIComponent(redirect + hash);
      // 此时 redirect 为 http%3A%2F%2F1.2.3.4%3A8880%2Fweb%2F%23%2Fpath%2Fabc%3Fabc%3D123%26ed%3Dabc

      // 将此redirect替换url中的redirect参数，得到最终的url，例如

      // url = 'http://1.2.3.4:8980/server/login?service=http%3a%2f%2f1.2.3.4%3a8880%2fapp%2ffoo&at=u&redirect=http%3A%2F%2F1.2.3.4%3A8880%2Fweb%2F%23%2Fpath%2Fabc%3Fabc%3D123%26ed%3Dabc'
      url = `${url.split("redirect=")[0]}redirect=${redirect}`;
      // 重定向到此url
      window.location = url;
      // 用户用此url登陆成功后会跳转回用户真实访问的页面 http://1.2.3.4:8880/web/#/path/abc?abc=123&ed=abc
    } else if (res.headers["request-type"] === "download" || !res.code) {
      // 下载文件接口返回的文件流
      return res;
    } else if (res.data.code === "999") {
      router.app.$router.push({
        name: "LoginCollaboration"
      });
      sessionStorage.removeItem("collaborationUserInfo");
    } else if (+res.data.code !== 0) {
      // 后端的msg没有放在data里面
      Message.error(res.data.msg || res.data.message || "后台服务异常");
      return Promise.reject("error");
    } else {
      return res;
    }
  },
  function(error) {
    Message.error("服务器连接失败");
    return Promise.reject(error);
  }
);

2.config.js文件（用于管理请求地址）

const CONTEXT_PATH = '/api'
// 接口地址
export default {
  // 登出
  logout: CONTEXT_PATH + '/user/logout',
  // 登录
  login: CONTEXT_PATH + '/user/login'
}

3.api.js文件（用于管理对应请求）

import { GET, POST, FORM_POST, DELETE, DOWNLOAD, GETBLOB } from './http'
import Common from './config'

// GET 请求演示
// export const logout = (p) => GET(CONFIG.COMMON.logout, {})
// POST 请求演示
// export const postDemo = (p) => POST(CONFIG.COMMON.POST_DEMO, p)

const Api = {
  logout: (p) => GET(Common.logout, {}),
  login: (p) => POST(Common.login, p),
}

export default Api

至此axios抽取已经完成，使用时：

import Api from '@/request/api'

// 提交用户信息
const onSubmit = async (values) => {
  try {
      const res = await Api.participantInfo(param)
      if (res.code === 200) {
        // TODO
      }
    } catch (error) {
      console.error('Error in API call:', error);
    }
};