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 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
Javascript之datagrid查询详解
Sep 15 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
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
Jquery性能优化详解
2014/05/15 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
诚信考试倡议书
2014/04/15 职场文书
工作建议书范文
2014/05/13 职场文书
负责培养人意见
2015/06/05 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL