Vue ajax Axios 二次封装，请求拦截器，相应拦截其

原创已于 2023-02-20 12:18:47 修改 · 295 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-02-10 20:30:47 首次发布

Vue 专栏收录该内容

8 篇文章

订阅专栏

该代码片段展示了如何使用axios库创建一个实例，设置基础URL和超时时间。它包含请求拦截器，检查并添加token到headers中进行身份验证，以及响应拦截器，用于处理返回的数据。此外，还提供了一个函数，用于封装API请求，支持GET和POST方法，并处理请求数据。

涵盖基础地址、判断是否有token、解析data、请求拦截器、响应拦截器

import axios from 'axios'
import store from '@/store'

export const baseURL = 'www.baidu.com'
const instance = axios.create({
  baseURL,
  timeout: 5000
})

// 请求拦截器
instance.interceptors.request.use(config => {
  const profile = store.state.user.profile
  if (profile && profile.token) {
    config.headers.authorization = 'Bearer ' + profile.token
  }
  return config
}, err => Promise.reject(err))

// 响应拦截器
instance.interceptors.response.use(config => {

  return config.data
}, err => Promise.reject(err))

/**
 * @param { String } url url地址 
 * @param { String } method 方法名 -> get post
 * @param { Object } submitData 传递的参数 -> 对象
 */

export default (url, method, submitData) => {
  return instance({
    url,
    method,
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}