vue 封装axios接口

最新推荐文章于 2025-02-15 09:55:30 发布

原创

最新推荐文章于 2025-02-15 09:55:30 发布 · 192 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中进行axios接口的封装，通过创建request.js和api.js两个文件，详细步骤包括文件创建和使用方法，实现方便快捷调用API。

1. 创建一个request.js文件

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'

/**
 * @template axios请求封装 拦截
 * @author daidai
 */
const service = axios.create({
  withCredentials: false, // 跨域请求时是否需要使用凭证
  baseURL: '/api',
  timeout: 5000 // request timeout
})

/**
 * @template axios请求拦截器
 * @author daidai 作者
 * @param config 请求头信息
 */
service.interceptors.request.use(
  config => {
    // 可以设置请求头和token信息
    // const TOKEN = localStorage.getItem('Token')
    // // const TOKEN = 'sadwsasdasd'
    // if(TOKEN){
    //   config.headers['Content-Type'] = 'application/json';
    //   config.headers['Authorization'] = TOKEN;
    // }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

/**
 * @template 响应拦截器
 * @author daidai 作者
 * @param response 响应数据
 */
service.interceptors.response.use(

  response => {
    const res = response.data

    // if the cus