axios 封装

最新推荐文章于 2024-09-09 09:35:48 发布

清水兮兮

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量180

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/jia632133535/article/details/126989731

版权

本文主要介绍了在前端项目中如何对axios进行封装，以提高代码复用性和接口调用的便利性，适用于Vue.js等项目。

摘要由CSDN通过智能技术生成

import axios from 'axios';
console.log(process.env.NODE_ENV);
// 超时设定
axios.defaults.timeout = 30000;
if(process.client){
  let baseURL = window.location.origin+'/api_v1'
  if( process.env.NODE_ENV === 'production'){
    baseURL = 'http://119.23.136.12:8605/api_v1';
    axios.defaults.withCredentials = true;
  }
  axios.defaults.baseURL = baseURL
}

axios.interceptors.request.use(config => {
    return config;
}, err => {
    // MessagePlugin.error('请求超时');
    return Promise.resolve(err);
});

// http response 拦截器
axios.interceptors.response.use(response => {
    const data = response.data;
    return data;
}, (err) => {
    console.log(err)
    // MessagePlugin.error(err.toString());
    return Promise.reject(err);
});

// get
export const getRequest = (url, params) => {
    return axios({
      method: 'get',
      url: `${url}`,
      params:params,
      headers: {
          'Content-Type': 'application/json;charset=UTF-8'
      }
  });
};
// post
export const postRequest = (url, params) => {
  return axios({
      method: 'post',
      url: `${url}`,
      data: params,
      headers: {
          'Content-Type': 'application/json;charset=UTF-8'
      }
  });
};
// upload
export const uploadRequest = (url, params) => {
  return axios({
      method: 'post',
      url: `${url}`,
      data: params,
      withCredentials: true,
      processData: false,
      contentType: false,
      headers: {}
  });
};

api.js

import { getRequest, postRequest, uploadRequest } from "./service";

// 注册邮箱验证获取验证码
export const EmailCode = (obj) => {
  return postRequest('/verify/send-email', obj)
}

// 注册
export const RegisterUser = (params) => {
  return postRequest('/user/register', params)
}

// 登录
export const LoginUser = (params) => {
  return postRequest('/user/login', params)
}

// 忘记密码
export const ForgetPassword = (params) => {
  return postRequest('/user/forget-password', params)
}

// 退出登录
export const OutLogin = (params) => {
  return getRequest('/user/logout', params)
}