前言
在前后端分离的大趋势下,ajax成为前后端数据交互的重要手段,当然并非只此一家,别无分号,但终归是当下最受欢迎的方式了(个人见解)。从js原生的XMLHttpRequest
到jQuery的$.ajax()
再到如今的axios
库,技术迭代,极大的便利了前端工程师的开发,不仅体现在代码量的层面,更多的是对开发人员友好。
今天我们来聊聊在异步编程世界中,结合ES6 Class
类 + async/await
对Axios的封装。
准备工作
在项目开发前,需要对整个项目有一个清晰的架构,静态资源、页面、工具类、api管理...都需要在开发工作前划分相适应的区块。
我们重点关注/src/axios
的目录,在该目录中,定义了三个js文件和两个api管理目录。
- api管理目录中的js文件存放了项目需要的接口地址
export const apiList = {
getLogList: 'feedback/list',
getNetworkInfo: 'feedback/networkInfo'
//more......
};
- axios.js文件添加了axios拦截器,这里不多赘述。
- env.js文件是获取当前项目运行的环境
- api.js文件即使封装axios的核心代码
代码开撸
在准备工作完成后,首先需要获取当前程序的运行环境、接口列表和axios库
import axios from 'axios';
import env from './env.js';
import {apiList} from './log/apiList.js'
接着完成axios请求的类封装,在我们实例化类时,需要传入相应的参数,比如:接口地址,请求参数、设置请求头,是否携带cookie......(可以根据实际情况自行增减)。需要注意一下几点
1.async修饰的方法(函数),await必须写在方法(函数)体里。 2.axios是基于promise
设计,返回的是一个Promise对象。
class Request{
constructor(url,params){
this.params = params || ''
this.url = env + url
}
async getRequest(){
const result = await axios.get(this.url,{params:this.params})
return new Promise((resolve) => {
//这里可以加一些对返回数据错误的处理,具体根据业务需求而定
resolve(result)
})
}
async postRequest(){
const result = await axios.post(this.url,this.params)
return new Promise((resolve) => {
//这里可以加一些对返回数据错误的处理,具体根据业务需求而定
resolve(result.data)
})
}
}
类封装完成后,就可以在任何地方调用了。具体调用方法:
async getData(){
let url = apiList.getLogList
let demo = new Request(url)
return await demo .getRequest()
}
总结
JavaScript语言的特性就决定了异步编程在其中需要发挥很大作用,但是在业务中却不得不需要同步调用数据,如果使用回调函数解决这一问题,那写出的代码恐怕自己看着都很恐怖。async/await
这一新特性能让我们的异步调用写出同步的感觉,Class类封装的axios,不仅使得我们的代码看上去更加的简洁,而且在接口的管理上也相对的便利,如果你遇上一个很皮的后端,三天两头改个接口,我们也不必担心,毕竟只是在接口管理中修改即可。
前端技术日新月异,只有不断进步才不会成为时代的掉队者。