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 相关文章推荐
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
JS实现简易留言板(节点操作)
Mar 16 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
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
javascript preload&lazy load
2010/05/13 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
url参数中有+、空格、=、%、&、#等特殊符号的问题解决
2013/05/15 Javascript
js Date概念详细介绍
2013/11/22 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
jQuery实现简单评论功能
2020/08/19 jQuery
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
上班看电影检讨书
2014/02/12 职场文书
酒后驾车标语
2014/06/30 职场文书
旷课检讨书
2015/01/26 职场文书
教师节简报
2015/07/20 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
2016年清明节寄语
2015/12/04 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏