Vue 请求方式封装（post，get）

最新推荐文章于 2025-03-24 09:51:18 发布

hot water.

最新推荐文章于 2025-03-24 09:51:18 发布

阅读量1.4k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/whowho_s/article/details/124630726

版权

本文介绍了如何使用Vue.js和axios实现HTTP请求的全面拦截，包括请求头的token管理，401状态处理，以及请求地址、参数和数据的处理函数。重点讲解了如何构造axios实例，设置超时、withCredentials和header，以及使用lodash进行参数合并和数据格式转换。

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

import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
// npm i qs
import qs from 'qs'
// npm i lodash
import merge from 'lodash/merge' 

const http = axios.create({
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
})

/**
 * 请求拦截
 */
http.interceptors.request.use(config => {
  config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
  return config
}, error => {
  return Promise.reject(error)
})

/**
 * 响应拦截
 */
http.interceptors.response.use(response => {
  if (response.data && response.data.code === 401) { // 401, token失效 
    router.push({ name: 'login' })
  }
  return response
}, error => {
  return Promise.reject(error)
})

/**
 * 请求地址处理
 * @param {*} actionName action方法名称
 */
http.adornUrl = (actionName) => { 
  return 'http://localhost:88/api' + actionName
}

/**
 * get请求参数处理
 * @param {*} params 参数对象
 * @param {*} openDefultParams 是否开启默认参数?
 */
http.adornParams = (params = {}, openDefultParams = true) => {
  var defaults = {
    't': new Date().getTime()
  }
  return openDefultParams ? merge(defaults, params) : params
}

/**
 * post请求数据处理
 * @param {*} data 数据对象
 * @param {*} openDefultdata 是否开启默认数据?
 * @param {*} contentType 数据格式
 *  json: 'application/json; charset=utf-8'
 *  form: 'application/x-www-form-urlencoded; charset=utf-8'
 */
http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
  var defaults = {
    't': new Date().getTime()
  }
  data = openDefultdata ? merge(defaults, data) : data
  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}

export default http