vue cli3的http请求封装

最新推荐文章于 2025-06-19 11:52:06 发布

「已注销」

最新推荐文章于 2025-06-19 11:52:06 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_40899714/article/details/89474495

vue 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在Vue CLI3项目中进行HTTP请求的封装，通过配置axios，实现请求拦截、响应拦截以及错误处理等功能，提升前端应用的网络请求效率和统一性。

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

import Cookies from 'js-cookie'

const TokenKey = 'access_token'
const contractNo = 'contractNo'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}
export function getContractNo() {
    return Cookies.get(contractNo)
}

import axios from 'axios'
import { MessageBox,Toast,Indicator} from "mint-ui";
// import Qs from 'qs' //引入方式
import {getToken,getContractNo} from './auth'
//form数据格式化
function formdata(obj) {
    //表单格式提交
    let data = new FormData();
    for (let j in obj) {
      data.append(j, obj[j]);
    }
    return data;
  }
let request = axios.create({
    baseURL: process.env.NODE_ENV === 'production'?`${window.location.protocol}//${window.location.host}/api`:`http://sitxqy.bndxqc.com/api`,
    timeout: 2500,
    headers: {
        "Content-Type": "application/json",
        channel: "XQYH5",
    }
});

// 响应拦截
request.interceptors.request.use(
  config => {
    Indicator.open();
    config.headers.access_token = getToken();
    if (config.method === 'post') {
        if(!config.data.FLAG){
            config.data = formdata(config.data);
        }else{
            config.data = JSON.stringify(config.data);
        }
    }
    return config;
  },
  error => {
    setTimeout(()=>{
        Indicator.close()
      },1000);
    return Promise.reject(error)
  }
)
function layout(){
  MessageBox.alert('由于您登录时间过长，为确保您的账户安全，请重新登录', '提示').then(()=>{
    window.location.href = `/login?ht=${getContractNo()}`
  })
}
request.interceptors.response.use(
  response => {
      const {status,statusText,data}= response;
      const {httpCode,msg} = data;
      Indicator.close()
    if(status!==200){
      if(status==499||status==498){layout();}
      return Promise.reject(statusText)
    }
    //token过期了，需要重新登录
     if(httpCode == 499 || httpCode== 498){
      layout();
      return Promise.reject(msg)
    } else if (httpCode == 200) {
      return Promise.resolve(data)
    }else {
      MessageBox.alert(msg, "提示");
      return Promise.reject(msg)
    }
  },
  error => {
      Indicator.close()
      error = error?error.toString():"";
    if(error.includes('499')||error.includes('498')){
      layout();
      return Promise.reject(error)
    }
    Toast({
      message: '请重新请求！',
      duration: 5000
    });
    return Promise.reject(error)
  }
)

export default request