基于axios给请求添加token

基于axios封装

创建js文件

复制代码
import axios from "axios";
import { baseURL } from '../utils/config.js'     //请求的地址
if (process.env.NODE_ENV === 'development') {
  baseURL;
} else {
  baseURL;
}

//创建自定义axios对象
const instance = axios.create({
  baseURL,
  timeout: 30000,
})


// 增加请求拦截器
instance.interceptors.request.use(
  config => {
    // console.group('本次请求的地址为:', config.url)
    // 给headers添加token属性
    if (sessionStorage.getItem('Token')) {
      config.headers.token = sessionStorage.getItem('Token');
    }
    // alert('解决');
    // alert(JSON.stringify(config))
    // if (store.state.meteoToken) {
    //     config.headers.Authorization = store.state.meteoToken;
    // }
    return config
  },
  error => {
    // loadingCount = 0;
    // if (loadingInstance) {
    //     loadingInstance.close();
    // }
    // alert('这里写警示框弹出的内容');
    return error;
  }
)
//暴露get
export function get (url, params = null) {
  return new Promise((resolve, reject) => {
    instance.get(url, {
      params,
    }).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err);
    });
  })
}

//暴露post  
export function post (url, params, isFile = false) {
  let data = params;
  //处理请求头
  let config = {
    Headers: { "Content-Type": "application/json" }
  }

  //处理文件
  if (isFile) {
    data = new FormData();
    for (let i in params) {
      data.append(i, params[i])
    }
    //处理有文件时请求头
    config = {
      Headers: {
        "Content-Type": "multiple/form-data"
      }
    }
  }
  // alert('ewuhshgjsnfsj'); 
  return new Promise((resolve, reject) => {
    instance.post(url, data, config).then(res => {
      resolve(res.data);
    }).catch(err => {
      // alert(err)
      reject(err)
    })
  })
}

封装之后可以直接引用该js文件中的get、post

相关推荐
前端毕业班3 小时前
uni-app 小程序支持 teleport 了
前端·javascript·vue.js
ALex_zry4 小时前
C++26 std::complex 结构化绑定详解:auto [re, im] = c
c语言·开发语言·c++
东风破_4 小时前
LLM 为什么记不住你?无状态、messages 和上下文管理
javascript·人工智能
梨子同志4 小时前
qiankun
前端
梨子同志4 小时前
Nginx
前端
梨子同志4 小时前
NestJS
前端
梨子同志4 小时前
Next.js
前端
谭光志4 小时前
工具塞满上下文窗口怎么办?深度拆解 AI Agent Tool Search 按需加载实现原理
前端·后端·ai编程
Hilaku4 小时前
前端架构师的克制:什么时候该坚决对新技术说不?
前端·javascript·程序员
她说..4 小时前
Java 默认值设置方式
java·开发语言·后端·springboot