Axios异步封装新方案 Class + Async/await

ECMAScript.png

前言

在前后端分离的大趋势下，ajax成为前后端数据交互的重要手段，当然并非只此一家，别无分号，但终归是当下最受欢迎的方式了(个人见解)。从js原生的XMLHttpRequest到jQuery的$.ajax()再到如今的axios库，技术迭代，极大的便利了前端工程师的开发，不仅体现在代码量的层面，更多的是对开发人员友好。

今天我们来聊聊在异步编程世界中，结合ES6 Class类 + async/await对Axios的封装。

准备工作

在项目开发前，需要对整个项目有一个清晰的架构，静态资源、页面、工具类、api管理...都需要在开发工作前划分相适应的区块。

目录结构.png

我们重点关注/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，不仅使得我们的代码看上去更加的简洁，而且在接口的管理上也相对的便利，如果你遇上一个很皮的后端，三天两头改个接口，我们也不必担心，毕竟只是在接口管理中修改即可。

前端技术日新月异，只有不断进步才不会成为时代的掉队者。