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>

感谢您的观看!

相关推荐
前端的日常5 分钟前
以下代码,那一部分运行快
前端
GeGarron6 分钟前
Drawing:专注高效画图,让每一次创作都值得被珍藏
前端
梨子同志6 分钟前
Vue v-model 指令详解
前端·vue.js
杨进军6 分钟前
简易实现 React 页面初次渲染
前端·react.js·前端框架
血舞之境8 分钟前
同名类引发问题:没见过世面导致遇见各种诡异的问题
前端
杨进军9 分钟前
实现 React 多个原生标签子节点渲染
前端·react.js·前端框架
前端的日常9 分钟前
AI 工具中,经常提到的 mcp 是什么,有哪些与前端方向结合的场景?
前端
嘉小华9 分钟前
Android 协程全景式深度解析:第四章 Flow响应式流
android·前端
Tina_晴11 分钟前
【基础篇】Promise初体验+案例分析(上)
前端·javascript·面试
7ayl12 分钟前
闭包
javascript