vue项目封装axios

最新推荐文章于 2025-06-05 09:20:49 发布

zl_gogogo

最新推荐文章于 2025-06-05 09:20:49 发布

阅读量1.6w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： axios vue

本文链接：https://blog.youkuaiyun.com/zhanglong_web/article/details/78786940

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了在Vue项目中，由于官方推荐使用axios代替vue-resource，作者分享了如何封装axios以实现统一的请求拦截和错误处理。通过展示src/api目录结构、apiUrl.js、apiUtil.js和index.js的代码，说明了如何将apiUrl.js的请求配置转化为可调用的方法，并在sendApiInstance中设置axios拦截器。最后展示了在页面中如何调用这些封装好的请求。

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

还是直奔主题吧，因为官方不推荐使用vue-resource，而是推荐axios，所以这篇文章分享给大家我在自己的项目里如何封装axios，虽说将axios在main.js里写入Vue的原型链作为Vue的属性（Vue.prototype.$http = axios），直接用最原始的方法也能进行请求

this.$http.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(err){
  console.log(err);
});

这样也不是说不可以，但是真的在开发工作中，因为要统一设置请求的拦截，错误的处理，所以封装axios是十分必要的。
首先这是我src下api的目录
这里写图片描述

这是apiUrl.js，将我们的请求名称和url以及方法放在这里

export default {
  login_in: { url: '/login', method: 'get' },
  getUserList: { url: '/user/list', method: 'get' }
}

重点在于我们的apiUtil.js

import axios from 'axios'
import { Toast } from 'mint-ui'

const generateApiMap = (map) => {
  let facade = {}
  _.forEach(map, function (value, key) {
    facade[key] = toMethod(value)
  })
  return facade
}

const toMethod = (options) => {
  options.method = options.method || 'post'
  return (params = {}, attachedParams, config = {}) => {
    params = _.extend(params, attachedParams)
    return sendApiInstance(options.method, options.url, params, config)
  }
}

// 创建axios实例
const createApiInstance = (config = {}) => {
  const _config = {
    withCredentials: true, // 跨域
    baseURL: ''
  }
  config = _.merge(_config, config)
  return axios.create(config)
}

const err_check = (code, message, data) => {
  if (code ==200){
    return true
  }
  return false
}

const sendApiInstance = (method, url, params, config = {}) => {
  if(!url){
    return
  }
  let instance = createApiInstance(config)

  instance.interceptors.response.use(response => {
    let {code, message, data} = response.data
    if (err_check(code, message, data) && data) {
      return Promise.resolve(data)
    } else {
      return Promise.reject(data)
    }
  },
  error => {
    Toast({
      message: error.response || error.message,
      duration: 3000
    })
    return Promise.reject(error).catch(res => {
        console.log(res)
      })
  }
  )
  if (method === 'get') {
    params = {
      params: params
    }
  }

  return instance[method](url, params, config)
}

export default {
  generateApiMap
}

紧接着是index.js

import apiUrl from './apiUri'
import apiUtil from './apiUtil'

const generateApiMap = apiUtil.generateApiMap({...apiUrl})
export default {
  ...generateApiMap // 取出所有可遍历属性赋值在新的对象上
}

可以看出来整体的想法就是在apiUrl.js里面只放请求名称以及url和请求方法，然后再apiUtil.js里面去将其转换为相应的方法，首先是在index.js里面调用generateApiMap，遍历我们的apiUrl将其中每个对象转换为方法，也就是toMethod要做的事，紧接着在sendApiInstance里去创建我们的axios实例，并设置拦截器（我只做了返回拦截），到return instance[method](url, params, config)这一步也就将我们的请求封装成功，下面是在页面调用的时候
这里写图片描述