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 相关文章推荐
javascript中万恶的function实例分析
May 25 Javascript
JS判定是否原生方法
Jul 22 Javascript
js图片处理示例代码
May 12 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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
pdo中使用参数化查询sql
2011/08/11 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
joomla组件开发入门教程
2016/05/04 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
python检测某个变量是否有定义的方法
2015/05/20 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
python实现换位加密算法的示例
2018/10/14 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
Final类有什么特点
2012/04/25 面试题
期末自我鉴定
2014/02/02 职场文书
环境整治工作方案
2014/05/18 职场文书
企业计划生育责任书
2015/05/09 职场文书
股东出资协议书
2016/03/21 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server