前言

JavaScript 中，Axios 是一个基于 Promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

今天，就让我们简单的封装一下 Axios。话不多说，开干！

JavaScript 复制代码

function myAxios(config) {
    return new Promise((resolve, reject) => { })
}

以上代码中，我们首先创建一个 myAxios 函数，因为 Axios 是基于 Promise 的网络请求，所以这个函数需要返回一个 Promise 对象。

函数创建完成后，就需要我们来设置一下它的配置（Axios 中需要的 url 地址等）。其中 url 地址是必须有的，其他配置是可有可无的，所以再返回 Promise 对象之前需要判断一下 config 接收的参数。如下：

JavaScript 复制代码

function myAxios(config) {
    config = config || {}
    if (!config.url) return console.error('必须要有一个地址')
    config.method = config.method || 'GET'
    if (config.params) {
        const paramsObj = new URLSearchParams(config.params)
        const queryString = paramsObj.toString()
        config.url += `?${queryString}`
    }
    config.data = JSON.stringify(config.data)
    return new Promise((resolve, reject) => { })
}

以上代码中，我们处理了必须传递的 url 地址和其他配置。接下来，我们就可以再 Promise 对象中进行 Ajax 请求了。

JavaScript 复制代码

function myAxios(config) {
    ...
    return new Promise((resolve, reject) => {
        const oAjax = new XMLHttpRequest()
        oAjax.open(config.method, config.url)
        if (config.data) {
            oAjax.setRequestHeader('Content-Type', 'application/json')
            oAjax.send(config.data)
        } else {
            oAjax.send()
        }
        oAjax.addEventListener('readystatechange', () => {
            if (oAjax.readyState == 4) {
                if (oAjax.status >= 200 && oAjax.status < 300) {
                    resolve(JSON.parse(oAjax.response))
                } else {
                    reject(new Error(oAjax.response))
                }
            }
        })
    })
}

以上代码中，简单的 Axios 就已经完成了，它的原理也很简单。

我们在 Promise 中创建了一个名字为 oAjax 的 Ajax 对象。然后它会根据我们传递的 url 地址和请求的方式、key 值通过 open 方法添加给 oAjax。然后通过判断是否传递 data 来决定是否需要添加请求头。最后，通过 readystatechange 属性判断一下 readyState、status 的值来决定是调用成功 resolve 函数还是失败 reject 函数。

需要注意的是，成功函数 resolve 的值是需要通过 JSON 的 parse 方法来转换为正常数据的。

这个简单的手写版 myAxios 虽然没有 Axios 功能全面，但也很明确的表示了 Axios 的原理，更好的帮助我们去理解使用 Axios。如果对它的具体原理感兴趣，可以去查看一下它的源码。

最后，Axios 的特性：

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

Axios 的下载方法：

使用 npm: npm install axios
使用 bower: bower install axios
使用 yarn: yarn add axios
使用 jsDelivr CDN: <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
使用 unpkg CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

感谢您的观看！

JavaScript中，如何去手写一个简单的Axios | 掘金·日新计划

前言