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

前言

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>

感谢您的观看!

相关推荐
IT_陈寒1 分钟前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端
树上有只程序猿37 分钟前
终于有人把数据库讲明白了
前端
猩兵哥哥42 分钟前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸43 分钟前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin1 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊1 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆1 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术1 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆1 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js