axios进阶实践之利用最优雅的方式写ajax请求


Posted in Javascript onDecember 20, 2017

前言

ajax相信不用过多介绍了,作者坚信可以用配置解决的问题,请勿硬编码,下面话不多说了,来一看看详细的介绍吧。

姊妹篇 jQuery进阶:用最优雅的方式写ajax请求

axios是Vue官方推荐的ajax库, 用来取代vue-resource。更多详细的基础知识可以参考这篇文章:https://3water.com/article/109444.htm

优点:

  • 增加一个ajax接口,只需要在配置文件里多写几行就可以
  • 不需要在组件中写axios调用,直接调用api方法,很方便
  • 如果接口有调整,只需要修改一下接口配置文件就可以
  • 统一管理接口配置

1. content-type配置

// filename: content-type.js
module.exports = {
 formData: 'application/x-www-form-urlencoded; charset=UTF-8',
 json: 'application/json; charset=UTF-8'
}

2. api 配置

// filename: api-sdk-conf.js
import contentType from './content-type'
export default {
 baseURL: 'http://192.168.40.231:30412',
 apis: [
 {
  name: 'login',
  path: '/api/security/login?{{id}}',
  method: 'post',
  contentType: contentType.formData,
  status: {
  401: '用户名或者密码错误'
  }
 }
 ]
}

3. request.js 方法

// request.js
import axios from 'axios'
import qs from 'qs'
import contentType from '@/config/content-type'
import apiConf from '@/config/api-sdk-conf'
var api = {}
// render 函数用来渲染路径上的变量, 算是一个微型的模板渲染工具
// 例如render('/{{userId}}/{{type}}/{{query}}', {userId:1,type:2, query:3})
// 会被渲染成 /1/2/3
function render (tpl, data) {
 var re = /{{([^}]+)?}}/
 var match = ''
 while ((match = re.exec(tpl))) {
 tpl = tpl.replace(match[0], data[match[1]])
 }
 return tpl
}
// fire中的this, 会动态绑定到每个接口上
function fire (query = {}, payload = '') {
 // qs 特别处理 formData类型的数据
 if (this.contentType === contentType.formData) {
 payload = qs.stringify(payload)
 } 
 // 直接返回axios实例,方便调用then,或者catch方法
 return axios({
 method: this.method,
 url: render(this.url, query),
 data: payload,
 headers: {
  contentType: this.contentType
 }
 })
}
apiConf.apis.forEach((item) => {
 api[item.name] = {
 url: apiConf.baseURL + item.path,
 method: item.method,
 status: item.status,
 contentType: item.contentType,
 fire: fire
 }
})
export default api

4. 在组件中使用

import api from '@/apis/request'
...
  api.login.fire({id: '?heiheihei'}, {
  username: 'admin',
  password: 'admin',
  namespace: '_system'
  })
...

浏览器结果:

Request URL:http://192.168.40.231:30412/api/security/login??heiheihei
Request Method:POST
Status Code:200 OK
Remote Address:192.168.40.231:30412
Referrer Policy:no-referrer-when-downgrade
POST /api/security/login??heiheihei HTTP/1.1
Host: 192.168.40.231:30412
Connection: keep-alive
Content-Length: 47
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
contentType: application/x-www-form-urlencoded; charset=UTF-8
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
username=admin&password=admin&namespace=_system

5. 更多

有个地方我不是很明白,希望懂的人可以给我解答一下

如果某个组件中只需要login方法,但是我这样写会报错。

import {login} from '@/apis/request'

这样写的前提是要在request.js最后写上

export var login = api.login
    

但是这是我不想要的,因为每次增加一个接口,这里都要export一次, 这不符合开放闭合原则,请问有什么更好的方法吗?

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript 入门基础学习
Mar 10 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
vue实现菜单切换功能
May 08 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 #Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 #jQuery
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 #Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 #Javascript
详解vue mixins和extends的巧妙用法
Dec 20 #Javascript
canvas轨迹回放功能实现
Dec 20 #Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 #jQuery
You might like
生成sessionid和随机密码的例子
2006/10/09 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
DOM相关内容速查手册
2007/02/07 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
自主招生推荐信范文
2014/05/10 职场文书
公司合作意向书范文
2014/07/30 职场文书
ktv好的活动方案
2014/08/15 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
节约用电倡议书
2015/04/28 职场文书
爱护环境建议书
2015/09/14 职场文书