前言
在前后端分离的大趋势下，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，不仅使得我们的代码看上去更加的简洁，而且在接口的管理上也相对的便利，如果你遇上一个很皮的后端，三天两头改个接口，我们也不必担心，毕竟只是在接口管理中修改即可。
前端技术日新月异，只有不断进步才不会成为时代的掉队者。
