vue接口请求类封装(Vue接口封装的完整步骤记录)
类别:编程学习 浏览量:1850
时间:2022-03-31 19:39:16 vue接口请求类封装
Vue接口封装的完整步骤记录首先根据接口写好对应页面的请求
内容如图尽量保证js文件名称与页面文件名称相同(易于查找)
根据文件目录动态引入/导出接口
提高便捷性
/** * 自动引入当前文件夹下所有module * require.context(directory, useSubdirectories = false, regExp = /^.//); * @param {String} directory 读取文件的路径 * @param {Boolean} directory 匹配文件的正则表达式 * @param {regExp} regExp 读取文件的路径 */ const modulesFiles = require.context( './', // 在当前目录下查找 false, // 不遍历子文件夹 /\.js$/ // 正则匹配 以 .js结尾的文件 ) const modules = modulesFiles.keys().reduce((modules, modulePath) => { const moduleName = modulePath.replace(/^.\/(.*)\.js/,'$1') const value = modulesFiles(modulePath) modules[moduleName] = value.default return modules }, {}) export default modules
根据项目情况编写拦截/插入内容
import axios from 'axios' import { MessageBox, Message } from 'element-ui' import store from '@/store' import { getToken } from '@/utils/auth' // create an axios instance const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 5000 // request timeout }) // request interceptor service.interceptors.request.use( config => { // 在发送请求之前做些什么 if (store.getters.token) { // let each request carry token让每个请求携带令牌 // ['X-Token'] is a custom headers key 是一个自定义标题键 // please modify it according to the actual situation请根据实际情况修改 config.headers['X-Token'] = getToken() } return config }, error => { // do something with request error console.log(error) // for debug return Promise.reject(error) } ) // response interceptor service.interceptors.response.use( /** * If you want to get http information such as headers or status如果您想获取http信息,如标头或状态 * Please return response => response */ /** * Determine the request status by custom code通过自定义代码确定请求状态 * Here is just an example这里只是一个例子 * You can also judge the status by HTTP Status Code您还可以通过HTTP状态码来判断状态 */ response => { const res = response.data // console.log(res); // 如果自定义代码不是20000,则判断为错误. if (res.code !== 200) { Message({ message: res.message || 'Error', type: 'error', duration: 5 * 1000 }) // 50008: 非法token; 50012: 其他客户端已登录; 50014: Token 已过期; if (res.code === 50008 || res.code === 50012 || res.code === 50014) { // to re-login MessageBox.confirm('您已注销,可以取消以停留在此页面,或重新登录', '确认注销', { confirmButtonText: 'Re-Login', cancelButtonText: 'Cancel', type: 'warning' }).then(() => { store.dispatch('user/resetToken').then(() => { location.reload() }) }) } return Promise.reject(new Error(res.message || 'Error')) } else { return res } }, error => { console.log('err' + error) // for debug Message({ message: error.message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } ) export default service
编写env文件
# just a flag ENV = 'development' # base api VUE_APP_BASE_API = 'http://192.168.2.44:5001/v1'
vue继承api
import serve from './api/index' Vue.prototype.$api = serve;
使用
getAssetsList() { this.$api.assets .getAssetsList(this.queryInfo.num, this.queryInfo.size) .then((res) => { this.assetsList = res.data.cards this.total = res.data.page.totalCount }) .catch(() => { this.$message.error({ message: "失败", duration: 700, }) }) },
总结
到此这篇关于Vue接口封装的文章就介绍到这了,更多相关Vue接口封装内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- springboot如何解析vue登录参数(SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解)
- vue移动端图片放大效果实现(vue实现图片切换效果)
- vue3.0怎么往标签填数据(Vue3.0写自定义指令的简单步骤记录)
- vue路由跳转的方法(Vue路由监听实现同页面动态加载的示例)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue的弹框怎么用(vue自定义弹框效果确认框、提示框)
- vue滚动条下拉翻页(Vue中利用better-scroll组件实现横向滚动功能)
- vue和springboot实战项目(vue+spring boot实现校验码功能)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- dockernginx服务器教程(Docker镜像+nginx 部署 vue 项目的方法)
- vue单元测试实例(Vue-Jest 自动化测试基础配置详解)
- vue-cli安装教程学习(Vue新手指南之创建第一个vue-cli脚手架程序)
- vue滚动条滚动事件(vue实现一个滚动条样式)
- vue过滤器filters怎么用(如何使用vue过滤器filter)
- vue父组件怎么用子组件的数据(Vue使用v-model封装el-pagination组件的全过程)
- vue导出动态的excel功能(vue中如何下载excel流文件及设置下载文件名)
- 你或许不知道你隐藏的支配欲望(你或许不知道你隐藏的支配欲望)
- 把宽体丰田86卖了,换成7.5代高尔夫GTI玩起姿态与性能并存的改装(把宽体丰田86卖了)
- 大众推出了第五代高尔夫GT(大众推出了第五代高尔夫GT)
- 换代在即,现在是抄底 7.5代 高尔夫的最佳时机吗(换代在即现在是抄底)
- 2020年大众7.5代高尔夫R终结特别版 最后的呐喊(2020年大众7.5代高尔夫R终结特别版)
- 七年前的这部剧有毒,全剧只有女主红到发紫,男主至今无人认识(七年前的这部剧有毒)
热门推荐
- Request获取URL的各种信息
- css设置超链接样式
- python写一个二叉树(Python二叉搜索树与双向链表转换算法示例)
- python创建pdf(Python玩转PDF的各种骚操作)
- php优势和缺点(PHP的介绍以及优势详细分析)
- centos6.5 32位安装gitlab(centos7安装部署gitlab服务器的方法)
- mysql8.0设置root密码(MySQL8.0.23版本的root密码重置最优解法)
- python中匿名函数关键字(浅谈python之高阶函数和匿名函数)
- mysql字符集怎么看(mysql字符集相关总结)
- apache https配置(Apache httpd 安装module mod_expires、mod_deflate的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9