vue 项目基于axios 对常用5种（POST、GET、PUT、DELETE、PATCH）请求进行封装

最新推荐文章于 2025-05-22 16:17:46 发布

置顶 wmss

最新推荐文章于 2025-05-22 16:17:46 发布

阅读量3.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： asios 文章标签： vue.js ajax

本文链接：https://blog.csdn.net/lisurpass/article/details/107964762

asios 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍如何在Vue项目中封装Axios库，包括安装、配置、请求与响应拦截及方法封装，最后演示如何在页面中调用封装后的请求方法。

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

一、安装axios

使用 npm: npm install axios --save
使用 cnpm: cnpm install axios --save
使用 yarn: yarn add axios --save
建议使用cnpm ！！！

二、src目录下新建lib文件夹lib文件夹下新建request.js

在这里插入图片描述

三、配置axios 进行封装

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

// 环境判断设置baseURL
let baseURL = process.env.NODE_ENV === 'development' ? 'dev.com' : process.env.NODE_ENV === 'production' ? 'pro.com' : 'test.com'

// 定义请求头 使用JSON格式

axios.defaults.baseURL = baseURL // Default base path

axios.defaults.headers.post['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.get['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.put['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.delete['Content-Type'] = 'application/json;charSet=UTF-8'

axios.defaults.headers.patch['Content-Type'] = 'application/json;charSet=UTF-8'

// 添加请求拦截器
axios.interceptors.request.use((config) => {
  // 携带token 身份验证
  let Token = store.getters['token']
  if (Token) {
    config.headers.Authorization = `Bearer ${Token}`
  }
  return config
}, (error) => {
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use((response) => {
  if (response.status !== 200) {
    console.log('请求信息', response)
    return Promise.reject(new Error('Error'))
  } else {
    return response
  }
}, (error) => {
  console.log(`err${error}`)
  return Promise.reject(error)
}
)

导出post、get、delete、put、patch方法

export default {
  /**

  * get 方法封装

  * @param url

  * @param params

  * @returns {Promise}

  */

  get (url, params = {}) {
    return new Promise((resolve, reject) => {
      // 若使用this.$http.get('qyolg5_1GB3ak1aU2jmKq1nWpMs.js', {bu: 'DiUrXmptcGdhZJ8BogErlAEr'}) 方式传参 必须使用 {params:params}
      // 若使用this.$http.get('qyolg5_1GB3ak1aU2jmKq1nWpMs.js?bu=DiUrXmptcGdhZJ8BogErlAEr') 方式传参 必须使用 params
      axios.get(url, {params: params}).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  },

  /**

  * post

  * @param url

  * @param params

  * @returns {Promise}

  */

  post (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.post(url, params)
        .then(res => {
          resolve(res.data)
        }, err => {
          reject(err)
        })
    })
  },

  /**

  * delete 方法封装

  * @param url

  * @param params

  * @returns {Promise}

  */

  delete (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.delete(url, params).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  },

  /**

  * put 方法封装

  * @param url

  * @param params

  * @returns {Promise}

  */

  put (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.put(url, params).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  },

  /**

  * patch 方法封装

  * @param url

  * @param params

  * @returns {Promise}

  */

  patch (url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.patch(url, params).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  }
}

四、main.js 引入使用

import request from './lib/request' // 全局请求
// 全局请求
Vue.prototype.$http = request

五、页面中使用

this.$http.post('path', {params})