vue 中 axios 封装及使用_const axios = require('axios')-优快云博客

本文链接：https://blog.youkuaiyun.com/l508742729/article/details/107566404

在Vue开发中，通常使用Axios作为与后端交互的数据库，因为其基于Promise并支持浏览器和Node.js环境。Axios提供拦截器、取消请求、JSON转换和XSRF防护等功能。为了统一管理接口API，进行了Axios的二次封装，封装后的API文件代码简洁易用，并提供了使用示例。

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

在开发vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。它有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。

此处根据项目需要对axios进行了二次封装，以便于对接口api进行统一管理，封装的 api文件内容代码如下：

const Axios = require('axios')
const METHODS = {
  GET: 'get',
  POST: 'post',
  PUT: 'put',
  DELETE: 'delete'
}

// 响应拦截器处理数据，接口响应状态正常时数据对象会多一层data包含响应数据
Axios.interceptors.response.use(data => {
  return data
}, error => {
  console.log('响应拦截器事件error', error.response)
  return Promise.reject(error.response)
})

// 接口地址 / 请求参数 / 请求方式 / 请求头信息
const request = (url, params = {}, method = METHODS.GET, headers = {}) => {
  // 本项目除登录接口外，其它所有接口请求头信息中均需要包含token信息方可访问
  let authToken = localStorage.getItem('Auth-Token')
  headers['Auth-Token'] = authToken
  let options = {
    headers: {
      'Content-type': 'application/json',
      ...headers
    },
    method,
  }
  if (method === METHODS.POST || method === METHODS.PUT) {
    if (options.headers['Content-type'] === 'application/json') {
      options.data = params
    }
  } else if (method === METHODS.GET || method === METHODS.DELETE) {
    options.params = params
  }
  return Axios({ url, ...options })
}

export default {
  // 以下接口为示例：
  // post请求
  getDataList: params => request('api/data/list', params, METHODS.POST),
  // get请求
  getDataList1: params => request('api/data/list1', params),
  // put请求  // 有其他参数的亦可根据需要添加
  getDataList2: (id, params) => request('api/data/list2' + id, params, METHODS.PUT)
}

使用示例：

import api from './service/api'
export default {
  data () {
    return {
      dataList: []
    }
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    getDataList() {
      let params = {
        pageNo: 1,
        pageSize: 10
      }
      // 无需参数时可去除params
      api.getDataList(params).then(res => {
        console.log('接口响应数据', res.data)
        this.dataList= res.data.datas
      }).catch(error => 
        console.log('获取数据异常', error)
      )
    }
  }

附：axios官方中文文档