JS中封装axios来管控api的2种方式


Posted in Javascript onSeptember 11, 2019

前言:我们在开发项目的时候,往往要处理大量的接口.并且在测试环境 开发环境 生产环境使用的接口baseurl都不一样 这时候如果在开发环境完成之后切换每一个接口的baseurl会变的非常的麻烦,(要去每一个发出请求的页面都要去修改地址)

所以为了更好的管控这些api,我们需要自己封装一个axios定义统一的接口baseurl 这样在环境的切换的时候更好的管控和修改.话不多说上代码!!!

 自己创建一个api文件夹 即可

import axios from 'axios'
  为了处理java字符串问题
import qs from 'qs' 
创建一个axios实例 在其中设置超时时间和响应头
const http = axios.create({
  baseURL: process.env.VUE_APP_MOCK_DATA_URL, // api 的 base_url
  timeout: 3000,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
})
/**
* 请求拦截 可以在发送请求的时候加上判断信息
*/
http.interceptors.request.use(config => {
 *****
  return config
}, error => {
  return Promise.reject(error)
})
/**
* 响应拦截 可以对传回的数据做出判断 
*/
http.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.reject(error)
})

将这个封装好的axios 暴露出去

export default http

在main.js中引入并且挂载到原型对象上

import http from '@/api/api.js'
 Vue.prototype.$http = http

第一种封装的方式一般就是对于api数量不是特别多的时候 复杂层级不高的情况 这样封装完全可以

第二种方式

'use strict'

同样的也需要引入这两个包

import axios from 'axios'
import qs from 'qs'

// 设置拦截器 默认请求url得前缀
// axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/custInfo' :
//  '127.0.0.1:8888', 
//  axios.interceptors.request.use(config => {
//   // // loading
//   return config
//  }, error => {
//   return Promise.reject(error)
//  })
// 
// axios.interceptors.response.use(response => {
//  return response
// }, error => {
//  return Promise.resolve(error.response)
// })

export default {
 post(url, data) {
  return new Promise((resolve, reject) => {
   axios({
    method: 'post',
    url,
    // qs这个插件主要是为了解决java后台接受到得参数必须是字符串
    data: qs.stringify(data),
    headers: {
     'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
   }).then((res) => {
    resolve(res)
   }).catch((error) => {
    reject(error)
   })
  })
 },
 get (url, params) {
  return new Promise((resolve, reject) => {
   axios({
    method: 'get',
    url,
    params, // get 请求时带的参数
   }).then((res) => {
    resolve(res)
   }).catch((error) => {
    reject(error)
   })
  })
 }
}

这种封装好之后,就可以在创建一个文件夹  然后把所有的接口都写在一起

getCustValue(params) {
    return $http.post('/custOverview/getCustValue', params);
  },
  getTacntrt(params) {
    return $http.get('/dict/getTacntrtMgmtMsgMonth', params);
  },
  query(params) {
    return $http.post('/indexManager/queryVipFlowCount', params);
  }

然后一一列举 就可以非常好的梳理api 

总结

以上所述是小编给大家介绍的JS中封装axios来管控api的2种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Prototype的Class.create函数解析
Sep 22 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
详解angular element()方法使用
Apr 08 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
js实现简单放大镜效果
Mar 07 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 #Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 #Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 #Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 #Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 #Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 #Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 #Javascript
You might like
深入了解PHP类Class的概念
2012/06/14 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
新闻内页-JS分页
2006/06/07 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
Python之py2exe打包工具详解
2017/06/14 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
快速了解Python开发环境Spyder
2020/06/29 Python
python实现画图工具
2020/08/27 Python
python如何设置静态变量
2020/09/07 Python
上课说话检讨书大全
2014/01/22 职场文书
校园文化建设方案
2014/02/03 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
党支部综合考察材料
2014/05/19 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang