首页 / VUE / 怎样对vue项目api接口进行管理
怎样对vue项目api接口进行管理
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了怎样对vue项目api接口进行管理,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2593字,纯文字阅读大概需要4分钟。
内容图文
![怎样对vue项目api接口进行管理](/upload/InfoBanner/zyjiaocheng/288/d3660e5b33854531a0270ef5964bf4be.jpg)
默认vue项目中已经使用vue-cli生成,安装axios,基于element-ui开发,axiosconfig目录和api目录是同级,主要记录配置的相关。
1. 在axiosconfig目录下的axiosConfig.js
import Vue from 'vue' import axios from 'axios' import qs from 'qs' import { Message, Loading } from 'element-ui' // 响应时间 axios.defaults.timeout = 5 * 1000 // 配置cookie // axios.defaults.withCredentials = true // 配置请求头 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 静态资源 Vue.prototype.$static = '' // 配置接口地址 axios.defaults.baseURL = '' var loadingInstance // POST传参序列化(添加请求拦截器) axios.interceptors.request.use( config => { loadingInstance = Loading.service({ lock: true, text: '数据加载中,请稍后...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }) if (config.method === 'post') { config.data = qs.stringify(config.data) } return config }, err => { loadingInstance.close() Message.error('请求错误') return Promise.reject(err) } ) // 返回状态判断(添加响应拦截器) axios.interceptors.response.use( res => { if (res.data.code === 200) { loadingInstance.close() return res } else { loadingInstance.close() Message.error(res.data.msg) } }, err => { loadingInstance.close() Message.error('请求失败,请稍后再试') return Promise.reject(err) } ) // 发送请求 export function post (url, params) { return new Promise((resolve, reject) => { axios .post(url, params) .then( res => { resolve(res.data) }, err => { reject(err.data) } ) .catch(err => { reject(err.data) }) }) } export function get (url, params) { return new Promise((resolve, reject) => { axios .get(url, { params: params }) .then(res => { resolve(res.data) }) .catch(err => { reject(err.data) }) }) }
2. 在api目录下的index.js,api1.js,api2.js
api1.js import { post } from '../axiosconfig/' export default { login(params) { return post('/users/api/login', params) } } api2.js import { post } from '../axiosconfig/' export default { regist(params) { return post('/users/api/regist', params) } } index.js import user from './api1.js' import active from './api2.js' export default { api1, api2 }
3. main.js 配置
import api from './api/' Vue.prototype.$api = api
4. 在组件中使用
登录组件中 doLongin() { let params={} this.$api.api1.login(params).then(res => { console.log(res) }) } 注册组件中 doRegist() { let params={} this.$api.api2.regist(params).then(res => { console.log(res) }) }
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
怎样在项目中使用JS装饰器函数
怎样操作echarts节点显示动态数据
以上就是怎样对vue项目api接口进行管理的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的怎样对vue项目api接口进行管理全部内容,希望文章能够帮你解决怎样对vue项目api接口进行管理所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。