前言

这几天有计划把博客里的axios封装一下, 本来是直接做的请求, 看着实在有点乱;
顺便复健一下axios抽离, 快给忘干净了;

一、计划一下

分两层来封, 基础层主要针对bseURL封装, 接口层针对每个接口进行封装;

如下图

二、基础层

确保后端更改baseURL时, 前端更方便安全的配合;
首先对于每个baseURL建立一组实例, 组内包括基于这个域名以各种method进行请求的实例;
我这里只用了一个域名和get/post两种请求方法, 所以我只需要根据请求方法创建两个实例分别负责post和get请求.
如此不需要在页面传入timeout, method以及baseURL;

//request.js
import axios from 'axios'
const baseURL = 'http://localhost:3000/'export const postService = axios.create({  //baseURL的post请求经由此baseURL: baseURL,timeout: 5000,method: 'post',
})export const getService = axios.create({   //baseURL的get请求经由此baseURL: baseURL,timeout: 5000,method: 'get',
})

三、接口层

每到一个页面都要做一次请求, 如果每个页面都传一次url就会有点糟糕了, 所以根据接口url再度封装.
确保前端在请求同一接口时不需要重复传入某一参数, 在我这里, 这个需要重复传入的参数只有url.
确保在后端仅更改接口url时, 前端能够更方便安全的配合;
如此不需要在页面传入url;

这里我多做了一步, 把每个页面的请求单独分了js文件, 所以这里是login.js, 放在一起也是一样的.

//login.js
import { postService, getService } from "./Service"export const postData = (data) => {  //后端从body里拿值是这样写的return postService({url: '/getComments',data})
}export const getData = () => {  //不用发数据的请求return getService({url: '/getHottest',})
}export const doLogin = (userData, elses) => {  //body和query都要传参的写法return postService({url: '/doLogin',userData,params: {elses}})
}

使用封装的axios请求

引入封装的最彻底的那层的方法, 这里也就是直接引入接口层的方法;

<button @click="getHottestArticle">getHottest</button>
<button @click="getComments">getComments</button>
<button @click="login">login</button>

//<script setup>
import { inject } from "vue";
const axios = inject("axios");
import { getData, postData, doLogin } from "./login.js";const getHottestArticle = () => {getData().then((res) => {console.log(res);});
}const getComments = () => {postData({ article_id: 1 }).then((res) => {console.log(res);});
}const login() => {doLogin({ username: "xxx", password: xxx }).then((res) => {console.log(res);});
}//</script>

总结

最近开始顺带着学Blender, 只是当个爱好吧.
说不定以后会记录一些Blender相关的技术…?

如果这篇文章帮到你, 我很荣幸.

Vue3 抽离封装axios相关推荐

Vue3+TypeScript 项目封装axios
Vue3+TypeScript 项目封装axios VUE CLI 中代码目录解构 config.js let BASE_URL = '' const TIME_OUT = 10000 //区分环境不 ...
vue3+vite+ts 封装axios踩坑记录
注意注意注意!!踩坑记录非教程示例,别跟着我进坑里,太胖我可能捞不起来(ÒωÓױ). 安装axios:npm install axios src文件夹下创建api和utils文件夹,utils里创建r ...
【收藏】vue3+vite+ts 封装axios踩坑记录
https://blog.csdn.net/M1512415/article/details/115378752
使用TS+vue3封装axios时编译报错，提示You may need an additional loader to handle the result of these loaders.
基于vue3+TS构建的商城后台管理系统根据coderwhy老师指导搭建的项目为PC端商品后台管理系统. 报错: 使用TS+vue3封装axios时编译报错,提示You may need an ad ...
vite + vue3 + 封装axios + 封装loading + 封装返回顶部
前言前期回顾 vite + vue3 + ts配置<企业级项目>二次封装el-table.分页_0.活在风浪里的博客-CSDN博客封装的功能有哪些?分页.表格排序.文字居中. ...
vue3（vite）设置代理，封装axios，api解耦
一.设置代理打开根目录下的vite.config.js文件,设置代理 import { defineConfig } from 'vite' import vue from '@vitejs/plu ...
在项目中用ts封装axios
写在前面虽然说Fetch API已经使用率已经非常的高了,但是在一些老的浏览器还是不支持的,而且axios仍然每周都保持2000多万的下载量,这就说明了axios仍然存在不可撼动的地位,接下来我们就 ...
封装axios加载动画Loding——vuex+axios拦截器
封装axios加载动画Loding--vuex+axios拦截器前言:我们在axios发送请求时候,会存在请求等待时长,我们一般会加一个动画,如果很多个时候一个一个的加动画代码看起来很臃肿很冗余,我 ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

Vue3 抽离封装axios

目录

前言

一、计划一下

二、基础层

三、接口层

使用封装的axios请求

总结

Vue3 抽离封装axios相关推荐

最新文章

热门文章