axios进阶实践之利用最优雅的方式写ajax请求
前言
ajax相信不用过多介绍了，作者坚信可以用配置解决的问题，请勿硬编码，下面话不多说了，来一看看详细的介绍吧。
姊妹篇jQuery进阶：用最优雅的方式写ajax请求
axios是Vue官方推荐的ajax库,用来取代vue-resource。更多详细的基础知识可以参考这篇文章：https://www.nhooo.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
importcontentTypefrom'./content-type'
exportdefault{
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
importaxiosfrom'axios'
importqsfrom'qs'
importcontentTypefrom'@/config/content-type'
importapiConffrom'@/config/api-sdk-conf'
varapi={}
//render函数用来渲染路径上的变量,算是一个微型的模板渲染工具
//例如render('/{{userId}}/{{type}}/{{query}}',{userId:1,type:2,query:3})
//会被渲染成/1/2/3
functionrender(tpl,data){
varre=/{{([^}]+)?}}/
varmatch=''
while((match=re.exec(tpl))){
tpl=tpl.replace(match[0],data[match[1]])
}
returntpl
}
//fire中的this,会动态绑定到每个接口上
functionfire(query={},payload=''){
//qs特别处理formData类型的数据
if(this.contentType===contentType.formData){
payload=qs.stringify(payload)
}
//直接返回axios实例，方便调用then,或者catch方法
returnaxios({
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
}
})
exportdefaultapi
4.在组件中使用
importapifrom'@/apis/request'
...
api.login.fire({id:'?heiheihei'},{
username:'admin',
password:'admin',
namespace:'_system'
})
...
浏览器结果：
RequestURL:http://192.168.40.231:30412/api/security/login??heiheihei RequestMethod:POST StatusCode:200OK RemoteAddress:192.168.40.231:30412 ReferrerPolicy:no-referrer-when-downgrade POST/api/security/login??heiheiheiHTTP/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;IntelMacOSX10_12_5)AppleWebKit/537.36(KHTML,likeGecko)Chrome/62.0.3202.94Safari/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最后写上
exportvarlogin=api.login
但是这是我不想要的，因为每次增加一个接口，这里都要export一次，这不符合开放闭合原则，请问有什么更好的方法吗？
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。