当前位置:   article > 正文

axios的二次封装

axios的二次封装

目录

一、axios是什么?

二、axios有哪些特性

三、在Vue中如何封装axios

四、为什么要进行封装


一、axios是什么?

axios 是一个轻量的 HTTP客户端

     基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选

二、axios有哪些特性

(1).从浏览器中创建 XMLHttpRequests
(2).从 node.js 创建 http请求
(3).支持 Promise API
(4).拦截请求和响应
(5).转换请求数据和响应数据
(6).取消请求
(7).自动转换JSON 数据
(8).客户端支持防御XSRF

三、在Vue中如何封装axios

1.在vue项目中安装axios

npm i axios

 2.新建axios.js文件,导入axios,对axios进行二次封装,分别对请求拦截器和响应拦截器进行二次封装,封装后每次都会监测当前localStorage是否有token,如果有token,则在请求头中携带token发送请求。

  1. import axios from 'axios'
  2. import { toast } from '~/composables/util'
  3. import { getToken } from '~/composables/auth'
  4. import store from '~/store'
  5. const service = axios.create({
  6. // 设置的基础路径(根路径),每次发送请求只需要写根路径后面的路径即可,会自动添加根路径
  7. baseURL: '/api'
  8. })
  9. // 添加请求拦截器
  10. service.interceptors.request.use(
  11. function (config) {
  12. // 往header头自动添加token
  13. const token = getToken()
  14. if (token) {
  15. config.headers['token'] = token
  16. }
  17. return config
  18. },
  19. function (error) {
  20. // 对请求错误做些什么
  21. return Promise.reject(error)
  22. }
  23. )
  24. // 添加响应拦截器
  25. service.interceptors.response.use(
  26. function (response) {
  27. // 对响应数据做点什么
  28. return response.data.data
  29. },
  30. function (error) {
  31. // 对响应错误做点什么
  32. const msg = error.response.data.msg || '请求失败'
  33. // token已经失效,依然进行操作,
  34. if (msg == '非法token,请先登录!') {
  35. store.dispatch('logout').then((res) => {
  36. location.reload()
  37. })
  38. }
  39. toast(error.response.data.msg || '请求失败', 'error')
  40. return Promise.reject(error)
  41. }
  42. )
  43. export default service

3.在vite.config.js文件中配置代理,解决跨域问题

相当于配置 /api 就是 下面接口的访问路径 http://ceshi13.dishait.cn

  1. server: {
  2. proxy: {
  3. '/api': {
  4. target: 'http://ceshi13.dishait.cn',
  5. changeOrigin: true,
  6. rewrite: (path) => path.replace(/^\/api/, '')
  7. }
  8. }
  9. },

 4.在vue文件中直接导入创建的axios文件,发送数据请求

  1. <script setup>
  2. import axios from '~/axios.js'
  3. axios.get('/admin/statistics1').then(res => {
  4. console.log(res);
  5. })
  6. </script>

最终请求到的数据如下

四、为什么要进行封装

axios 的 API 很友好,你完全可以很轻松地在项目中直接使用。

     不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作,都需要写一遍

      这种重复劳动不仅浪费时间,而且让代码变得冗余不堪,难以维护。为了提高我们的代码质量,我们应该在项目中二次封装一下 axios 再使用

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/238662?site
推荐阅读
相关标签
  

闽ICP备14008679号