vue项目中api接口管理总结


Posted in Javascript onApril 20, 2018

默认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)
 })
}
Javascript 相关文章推荐
jquery里的正则表达式说明
Aug 03 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 #jQuery
js Element Traversal规范中的元素遍历方法
Apr 19 #Javascript
关于vue中的ajax请求和axios包问题
Apr 19 #Javascript
详解vue 数据传递的方法
Apr 19 #Javascript
Vue 去除路径中的#号
Apr 19 #Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 #Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 #Javascript
You might like
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python 中的with关键字使用详解
2016/09/11 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
python中round函数如何使用
2020/06/19 Python
python飞机大战游戏实例讲解
2020/12/04 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
2014年小学教学工作总结
2014/11/13 职场文书
先进教师事迹材料
2014/12/16 职场文书
小学校园广播稿
2015/08/18 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
AJAX实现省市县三级联动效果
2021/10/16 Javascript
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL