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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
javascript 写类方式之十
Jul 05 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
jquery css实现流程进度条
Mar 26 jQuery
如何用JS实现简单的数据监听
May 06 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
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
用js实现小球的自由移动代码
2013/04/22 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
浅谈mint-ui 填坑之路
2017/11/06 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
js操作二进制数据方法
2018/03/03 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
转党组织关系介绍信
2014/01/08 职场文书
自荐信的基本格式
2014/02/22 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
考研复习计划
2015/01/19 职场文书
公证处委托书
2015/01/28 职场文书
中学教代会开幕词
2016/03/04 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
深入理解Vue的数据响应式
2021/05/15 Vue.js
python中的getter与setter你了解吗
2022/03/24 Python
Python中第三方库Faker的使用详解
2022/04/02 Python