VUE中对axios的封装

最新推荐文章于 2024-04-27 03:04:42 发布
最新推荐文章于 2024-04-27 03:04:42 发布
阅读量747 收藏 2
点赞数
分类专栏： vue axios
dengzhanyong
本文链接：https://blog.csdn.net/DengZY926/article/details/102821441
版权
vue 同时被 2 个专栏收录
16 篇文章 2 订阅
订阅专栏
axios
2 篇文章 0 订阅
订阅专栏

前言

在VUE项目中进行数据交互使用的比较多的就是axios，新手一般都是安装完axios插件后在需要的地方直接使用axios.get()或axios.post()，我也不例外。在小项目中的确这种方式简单快捷，但是当在大项目中还是这样使用起来就显得非常的繁琐，自己也开始研究如何进行优化，把公共的部分提取出来，减少代码的沉余。但是始终还是觉得自己的想法不够先进，后面在看一个VUE开源项目的时候发现它对axios进行封装的很好，于是借鉴了一下。

目录结构

在src目录下新建文件夹api，api文件夹下新建apis文件夹（存放所有api接口）、urls文件夹（存放所有api接口的url）、axios文件（对axios进行配置）、index.js文件。

axios.js（配置【完整全部内容见最后】）

1.对请求头部进行配置（基础的url、请求超时、headers）

const tokenKey = 'JEECMS-Auth-Token'
const request = axios.create({
  baseURL: process.env.VUE_APP_API_PREFIX,
  timeout: 50000,
  headers: {
    'Content-Type': 'application/json',
    'Redirect-Header': false
  }
})

2.对请求参数进行配置

const baseHeader = () => {  //动态获取token和标志性的ID
  const token = window.localStorage.getItem(tokenKey)
  const siteId = window.localStorage.getItem('siteId')
  return {   //返回新的内容
    [tokenKey]: token,
    siteId
  }
}
request.interceptors.request.use(config => {
  config.headers = Object.assign({}, baseHeader(), config.headers)   //修改headers
  if (!config.url) {   //使用elementUI的消息框进行提示
    Message.error({
      showClose: true,
      message: '接口地址错误',
      type: 'error',
      duration: 3 * 1000
    })
  } else if (config.url.endsWith('/admin/login')) {   //特殊情况处理
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
    config.data = qs.stringify(config.data)
  }
  return config
}, error => {   //对请求出错后的处理
  console.log(error)
  return Promise.reject(error)
})

3.对返回参数进行配置

request.interceptors.response.use(response => {
  if (response.data.token && response.data.token !== '') {
    localStorage.setItem(tokenKey, response.data.token)
  }
  return response
}, error => {
  // console.log(error)
  let message = error.message
  if (error.response.status === 404) {
    message = '接口访问失败'
  }
  Message({
    showClose: true,
    message,
    type: 'error',
    duration: 3 * 1000
  })
  return Promise.reject(error)
})

4.对请求结果状态处理

const checkStatus = response => {
  if (response && response.status === 401) {
    window.localStorage.setItem(tokenKey, '')
    const url = window.location.hash.substr(1)
    if (/^\/login/.test(url)) {
      router.push(url)
    } else {
      router.push(`/login?redirect=${escape(url)}`)
    }
    return
  }
  if (response && (response.status === 200 || response.status === 304 || response.status === 400 || response.status === 404)) {
    return response.data
  }
  return {
    status: -404,
    msg: '网络异常'
  }
}

function checkCode (res) {
  if ([501, 502, 503, 506].includes(res.code)) {
    window.localStorage.setItem(tokenKey, '')
    const url = window.location.hash.substr(1)
    if (/^\/login/.test(url)) {
      router.push(url)
    } else {
      router.push(`/login?redirect=${escape(url)}`)
    }
  }
  if (res.code !== 200) {
    Message({
      showClose: true,
      message: res.message || '服务器端错误',
      type: 'error',
      duration: 3 * 1000
    })
  }
  return res
}

 5.导出各种请求方式

export default {
  request (config) {
    return axios.request(config).then(checkStatus).then(checkCode)
  },
  login (url, data) {
    return requestLogin({
      method: 'post',
      url,
      data
    }).then(checkStatus).then(checkCode)
  },
  upload (url, data, onUploadProgress = () => {}) {
    return request({
      method: 'post',
      url,
      headers: { 'Content-Type': 'multipart/form-data' },
      data,
      onUploadProgress
    }).then(checkStatus).then(checkCode)
  },
  download (url, data, onDownloadProgress = () => {}) {
    return request({
      method: 'post',
      url,
      data,
      responseType: 'blob',
      onDownloadProgress
    }).then(checkStatus)
  },
  post (url, data, onUploadProgress = () => {}) {
    return request({
      method: 'post',
      url,
      data,
      onUploadProgress
    }).then(checkStatus).then(checkCode)
  },
  get (url, params, headers = {}) {
    return request({
      method: 'get',
      url,
      params,
      headers
    }).then(checkStatus).then(checkCode)
  },
  put (url, data) {
    return request({
      method: 'put',
      url,
      data
    }).then(checkStatus).then(checkCode)
  },
  patch (url, data) {
    return request({
      method: 'patch',
      url,
      data
    }).then(checkStatus).then(checkCode)
  },
  delete (url, data) {
    return request({
      method: 'delete',
      url,
      data
    }).then(checkStatus).then(checkCode)
  }
}

URL封装（以登陆模块为例）

const prefix = '/admin'

export default {
  // 验证码
  code: '/common/kaptcha',
  // 登陆
  login: `${prefix}/login`,
  // 上传
  upload: `${prefix}/upload/o_upload`,
  // 返回中文首字母
  pinyin: '/language/pinyin',
  // 自动摘要
  summary: '/language/summary',
  // 修改密码
  adminpsw: `${prefix}/users/adminpsw`,
  // 导入word
  docImport: `${prefix}/contentext/docImport`
}

接口封装（以登陆模块为例）

import axios from '../axios'
import loginUrls from '../urls/login'

export default {
  fetchCode () {
    return axios.get(loginUrls.code)
  },
  fetchLogin (data) {
    return axios.login(loginUrls.login, data)
  },
  fetchUpload (data, onUploadProgress) {
    return axios.upload(loginUrls.upload, data, onUploadProgress)
  },
  fetchPinyin (data) {
    return axios.get(loginUrls.pinyin, data)
  },
  fetchSummary (data) {
    return axios.post(loginUrls.summary, data)
  },
  fetchAdminPsw (data) {
    return axios.post(loginUrls.adminpsw, data)
  },
  fetchDocImport (data) {
    return axios.upload(loginUrls.docImport, data)
  }
}

index.js

const modulesFiles = require.context('./apis', true, /\.js$/)
// 这里是webpack的方法，参数说明：要搜索的文件夹目录、是否还应该搜索它的子目录、以及一个匹配文件的正则表达式
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const value = modulesFiles(modulePath)
  modules = Object.assign(modules, value.default)
  return modules
}, {})

export default modules

如何使用

在需要的地方使用如下方法调用接口

this.fetchLogin(data).then(res => {.....})

给自己做个宣传

本人个人博客：www.dzyong.com

 

附录：axios.js全部内容

import axios from 'axios'
import qs from 'qs'
import { Message } from 'element-ui'
import router from '@/routes'

const tokenKey = 'JEECMS-Auth-Token'
const request = axios.create({
  baseURL: process.env.VUE_APP_API_PREFIX,
  timeout: 50000,
  headers: {
    'Content-Type': 'application/json',
    'Redirect-Header': false
  }
})

const baseHeader = () => {
  const token = window.localStorage.getItem(tokenKey)
  const siteId = window.localStorage.getItem('siteId')
  return {
    [tokenKey]: token,
    siteId
  }
}

request.interceptors.request.use(config => {
  config.headers = Object.assign({}, baseHeader(), config.headers)
  if (!config.url) {
    Message.error({
      showClose: true,
      message: '接口地址错误',
      type: 'error',
      duration: 3 * 1000
    })
  } else if (config.url.endsWith('/admin/login')) {
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
    config.data = qs.stringify(config.data)
  }
  return config
}, error => {
  console.log(error)
  return Promise.reject(error)
})

request.interceptors.response.use(response => {
  if (response.data.token && response.data.token !== '') {
    localStorage.setItem(tokenKey, response.data.token)
  }
  return response
}, error => {
  // console.log(error)
  let message = error.message
  if (error.response.status === 404) {
    message = '接口访问失败'
  }
  Message({
    showClose: true,
    message,
    type: 'error',
    duration: 3 * 1000
  })
  return Promise.reject(error)
})

const checkStatus = response => {
  if (response && response.status === 401) {
    window.localStorage.setItem(tokenKey, '')
    const url = window.location.hash.substr(1)
    if (/^\/login/.test(url)) {
      router.push(url)
    } else {
      router.push(`/login?redirect=${escape(url)}`)
    }
    return
  }
  if (response && (response.status === 200 || response.status === 304 || response.status === 400 || response.status === 404)) {
    return response.data
  }
  return {
    status: -404,
    msg: '网络异常'
  }
}

function checkCode (res) {
  if ([501, 502, 503, 506].includes(res.code)) {
    window.localStorage.setItem(tokenKey, '')
    const url = window.location.hash.substr(1)
    if (/^\/login/.test(url)) {
      router.push(url)
    } else {
      router.push(`/login?redirect=${escape(url)}`)
    }
  }
  if (res.code !== 200) {
    Message({
      showClose: true,
      message: res.message || '服务器端错误',
      type: 'error',
      duration: 3 * 1000
    })
  }
  return res
}

// 登录用的请求实例
const requestLogin = axios.create({
  baseURL: process.env.VUE_APP_API_PREFIX,
  timeout: 50000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

requestLogin.interceptors.request.use(config => {
  config.data = qs.stringify(config.data)
  return config
}, error => {
  return Promise.reject(error)
})

requestLogin.interceptors.response.use(response => {
  return response
}, error => {
  let message = error.message
  if (error.response.status === 404) {
    message = '接口访问失败'
  }
  Message({
    showClose: true,
    message,
    type: 'error',
    duration: 3 * 1000
  })
  return Promise.reject(error)
})

export default {
  request (config) {
    return axios.request(config).then(checkStatus).then(checkCode)
  },
  login (url, data) {
    return requestLogin({
      method: 'post',
      url,
      data
    }).then(checkStatus).then(checkCode)
  },
  upload (url, data, onUploadProgress = () => {}) {
    return request({
      method: 'post',
      url,
      headers: { 'Content-Type': 'multipart/form-data' },
      data,
      onUploadProgress
    }).then(checkStatus).then(checkCode)
  },
  download (url, data, onDownloadProgress = () => {}) {
    return request({
      method: 'post',
      url,
      data,
      responseType: 'blob',
      onDownloadProgress
    }).then(checkStatus)
  },
  post (url, data, onUploadProgress = () => {}) {
    return request({
      method: 'post',
      url,
      data,
      onUploadProgress
    }).then(checkStatus).then(checkCode)
  },
  get (url, params, headers = {}) {
    return request({
      method: 'get',
      url,
      params,
      headers
    }).then(checkStatus).then(checkCode)
  },
  put (url, data) {
    return request({
      method: 'put',
      url,
      data
    }).then(checkStatus).then(checkCode)
  },
  patch (url, data) {
    return request({
      method: 'patch',
      url,
      data
    }).then(checkStatus).then(checkCode)
  },
  delete (url, data) {
    return request({
      method: 'delete',
      url,
      data
    }).then(checkStatus).then(checkCode)
  }
}

 

前端筱园
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue封装Axios
A535366的博客
08-27 271
1.为什么要封装axios?封装axios 如果每发起⼀次 HTTP 请求，就要把这些⽐如设置超时时间、设置请求头、根据 项⽬环境判断使⽤哪个请求地址、错误处理等等操作，都需要写⼀遍 这种重复劳动不仅浪费时间，⽽且让代码变得冗余不堪，难以维护。为了提⾼我们的代码质量，我们应该在项⽬中⼆次封装⼀下 axios 再使⽤ axios是单立模式因为每一次请求都需要用到这个axios 首先安装axios-S到生产环境里， 为什么要安装到生产环境里， 因为安装到生产环境里开发环境也可以使用 但
Vue3 Axios封装
最新发布
yaoson的博客
07-22 335
在调用后端接口时，经常会遇到同一种的请求方式，参数类型多种的情况，所以我们可以在使用之前再进行一层封装。在这里就不过多讲述了，有需要的星友们可以在评论区，或者私信我，到时统计一下，再具体看看要不要出一篇文章单独讲述。1、baseURL：会自动加在 `url` 前面，除非 `url` 是一个绝对 URL。这里只做了基础的业务处理，各位星友可以根据自己具体的业务要求进行封装，遇到有趣的业务时欢迎在评论区分享。后面我也会整理一些我常遇到的业务，再续写一篇业务封装的文章。2、timeout：指定请求超时的毫秒数。
vue封装axios
watermelon
04-26 231
第一步:下载axios npm install axios 第二步： 设置请求头及其请求地址 定义一个api文件夹，新建一个index.js文件， 内容如下 // 第一步：实例化axios对象，简单封装 const axios = require('axios'); // 生成一个axios实例 axios.defaults.baseURL = 'http://192.168.1.5:8006/api'; // 设置请求后端的URL地址 axios.de
详解Vue中Axios封装API接口的思路及方法
10-14
在 Vue 中封装 Axios API 接口的主要目的是为了提高代码复用性和易维护性。以下是一个详细的封装过程： 1. **安装 Axios** 首先，需要在项目中安装 Axios。在命令行中执行 `npm install axios` 来添加 Axios 作为...
vue中封装axios的方法以及如何使用
01-03
在vue中常用的请求方式就是axios，下面讲解axios的封装方式 第一步，需要引入axios import axios from 'axios'//引入axios import router from '../router/index'//引入路由 第二步，定义新的axios let instance = ...
vue+ts下对axios的封装实现
10-15
本文将详细介绍如何在Vue+TS项目中对axios进行封装，包括设置拦截器来处理请求和响应。 首先，确保你已经安装了axios。在终端中运行以下命令来安装它： ```bash npm install axios -D ``` 接下来，我们将创建一个...
vue axios封装 axios 请求
03-27
vue axios封装 axios 请求
vue3 +ts 安装并封装axios_vue3 ts axios封装
2401_84435152的博客
04-27 301
export const 自定义接口名 = (形参:请求类型)：返回类型 => instance.方法(路径，后端要的参数);
vue 封装 axios
爱睡的虫虫
11-17 861
安装 只用安装一个axios就可以了。 npm install axios –save 接口代理设置 //文件位置：config/index.js proxyTable: { '/api': { target: 'http://47.95.xxx.246:8080', // 通过本地服务器将你的请求转发到这个地址 changeOrigin: true...
Vue封装axios
ZhanHanson的博客
10-02 1508
axios 的使用
VUE封装axios
m0_60689237的博客
03-09 496
axios的封装应该先封装好来，再挂载到app实例上去。封装时可以用拦截器对请求进行一些统一的处理。
Vue中axios封装详解与实战
通过以上步骤，开发者可以创建一个易于维护和扩展的axios封装模块，使Vue项目中的HTTP请求更加统一和高效。在实际应用中，可以根据具体需求进一步定制化封装，例如添加请求取消、缓存管理等功能，以适应项目需求。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端筱园

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值