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 相关文章推荐
JScript中的"this"关键字使用方式补充材料
Mar 08 Javascript
拖拉表格的JS函数
Nov 20 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
Jul 18 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 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运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
php 地区分类排序算法
2013/07/01 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
js获取class的所有元素
2013/03/28 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
Python编写一个闹钟功能
2017/07/11 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
python3图片文件批量重命名处理
2019/10/31 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
python中pyqtgraph知识点总结
2021/01/26 Python
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
写给学生的新学期寄语
2014/01/18 职场文书
党员公开承诺书
2014/03/25 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android