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 相关文章推荐
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
JS中的函数与对象的创建方式
May 12 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
微信小程序实现点击导航条切换页面
Nov 19 Javascript
微信小程序实现拍照和相册选取图片
May 09 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
详解EventDispatcher事件分发组件
2016/12/25 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
python做量化投资系列之比特币初始配置
2018/01/23 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
Python递归函数特点及原理解析
2020/03/04 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
Python库安装速度过慢解决方案
2020/07/14 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
美国性感内衣店:Yandy
2018/06/12 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
C#笔试题集合
2013/06/21 面试题
化学教师教学反思
2014/01/17 职场文书
管理失职检讨书
2014/02/12 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
销售口号大全
2014/06/11 职场文书
青岛海底世界导游词
2015/02/11 职场文书
实习班主任自我评价
2015/03/11 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
Python装饰器的练习题
2021/11/23 Python