vue项目中如何封装api,使请求方法清晰,适合协作开发
2023-09-11 14:19:39 时间
以下是模仿element-admin框架中的那种模式,感觉非常好用,所以就搬到了自己的项目中,在此记录以下。
首先我们需要有一个request.js:(封装axios的拦截器,并返回axios实例对象)
import axios from 'Axios'; import tools from '@/utils/tools'; // 创建一个axios实例 const service = axios.create({ baseURL:"", // url = base url + request url withCredentials: true, // send cookies when cross-domain requests timeout: 10000 // request timeout 10s }); // 请求拦截器 service.interceptors.request.use(config => { // do something before request is sent return config; },error => { // do something with request error console.log(error) // for debug return Promise.reject(error); }); // 响应拦截器 service.interceptors.response.use(response => { //do something before response if (response.status >= 200 && response.status <= 210) { return response; } else { //不走 } }, error => { console.log('err' + error); // for debug tools.error(error); return Promise.reject(error); }) export default service;
比如说要将用户相关的请求方法放在user.js中,(这样随着项目的变大,会比较清晰)
user.js:
import request from '@/utils/request'; import proxy from '@/utils/proxy'; export function login(data) {//例子 return request({ url: proxy.lichao+'/user/login', method: 'post', data }) } export function getInfo(token) {//例子 return request({ url: proxy.lichao+'/user/info', method: 'get', params: { token } }) } export function getToken(){//获取token return request({ url:proxy.xuehui+"/qiniu/token", method:"get", params:null, }) }
注意到有一个proxy.js是搞代理的
proxy.js
const onlineIP = window.location.origin //全局变量 const lipeng = process.env.NODE_ENV === "production" ? onlineIP + "/qiantai" : "qiantai" const xuehui = process.env.NODE_ENV === "production" ? onlineIP + "/qiantai" : "qiantai" const lichao = process.env.NODE_ENV === "production" ? onlineIP + "/qiantai" : "qiantai" export default { lipeng, xuehui, lichao }
比如在页面洪使用:
import {getToken} from "@/api/user";
getToken().then(res=>{ console.log(res) }).catch(err=>{ console.log(err) })
完
.
相关文章
- vue - 官方 - 上手
- 【Vue】Vue组件中事件和方法的混合(mixin)应用(图文+代码示例)
- 如何在vue项目中使用svg图标
- Vue——详解MVVM模型在vue中的使用
- 【GIS】Vue、Leaflet、highlightmarker、bouncemarker
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
- vue-cli 上传图片上传到OSS(阿里云)
- vue小结1
- 【Vue】Mock.js的使用教程,入门级(附代码和案例)
- 【Vue】vue基础语法——computed计算、watch监听、class和style,最后回顾JavaScript里面的常用方法(vue学习day03)
- vue文档摘录七:内置组件
- Vue原理之ref与shallowRef
- Vue 安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated,的错误解决方法
- vue-cli3项目打包后,在自己搭的服务器上访问打包好的页面空白,处理方法
- vue前台(六点二)
- Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用
- Vue学习第20天——Vue中常用的ajax请求库(axios与vue-rouserce)
- vue-解决Vue打包上线之后部分CSS不生效的问题
- 解决VsCode启动Vue项目报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
- Vue使用distpicker插件实现省市级下拉框三级联动
- 【转】从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)