基于 xhr 实现 axios

这篇具有很好参考价值的文章主要介绍了基于 xhr 实现 axios。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

基于 xhr 实现 axios

上面我们讲到二次封装 axios ,但是现在我们尝试完全脱离 axios,自己实现一个 axios,由于 axios 底层是基于 xhr 做了二次封装,所以我们也可以尝试一下。

xhr 二次封装

src/plugins/xhr.js

/**
 * 请求拦截器队列
 * 响应拦截器队列
 */
const request = []
const response = []

/**
 * xhr 封装
 */
function axios(config) {
    return new Promise((resolve) => {
        request.forEach((fn) => (config = fn(config)))

        const { method, url, data, headers } = config

        /**
         * 新建请求
         */
        const xhr = new XMLHttpRequest()
        xhr.open(method, url)

        /**
         * 设置请求头
         */
        for (const key in headers) {
            xhr.setRequestHeader(key, headers[key])
        }

        /**
         * 发送请求
         */
        xhr.send(data)

        /**
         * 监听返回值
         */
        xhr.onreadystatechange = () => {
            if (!(xhr.readyState === 4 && xhr.status === 200)) return

            let data = JSON.parse(xhr.responseText)

            response.forEach((fn) => (data = fn(data)))

            resolve(data)
        }
    })
}

/**
 * 拦截器定义
 */
axios.interceptors = {
    request: {
        use: (fn) => {
            request.push(fn)
        }
    },
    response: {
        use: (fn) => {
            response.push(fn)
        }
    }
}

export default axios

axios 二次封装

src/plugins/axios.js

import axios from './xhr'
import qs from 'qs'

/**
 * 请求拦截器
 */
axios.interceptors.request.use((config) => {
    config.data = qs.stringify(config.data)

    return config
})

/**
 * 响应拦截器
 */
axios.interceptors.response.use((response) => {
    if (response.code !== 200) {
        alert('接口响应失败')
    }

    return response
})

/**
 * 接口请求方法
 */
const request = (method, option) => {
    return axios({
        method: method,
        url: 'https://study.noxussj.top' + option.url,
        data: option.data,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
}

export default {
    get: (option) => request('get', option),
    post: (option) => request('post', option),
    put: (option) => request('put', option)
}

调用

import axios from './plugins/axios.js'

/**
 * 发起请求
 */
const p1 = axios.post({
    url: '/api/login',
    data: { account: 'test', password: '123456' }
})

p1.then((res) => {
    console.log(res.data)
})

基于 xhr 实现 axios,网络,网络协议,javascript,前端

修改后预览效果,依然是可以正常请求接口。

基于 xhr 实现 axios,网络,网络协议,javascript,前端

原文链接:菜园前端文章来源地址https://www.toymoban.com/news/detail-679842.html

到了这里,关于基于 xhr 实现 axios的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2 利用网络代理axios实现开发环境前端跨域

    vue2 利用网络代理axios实现前端跨域 vue.config.js 配置代理 vue文件 实现开发环境跨域请求 测试生产环境跨域跳转 https://blog.csdn.net/weixin_43858851/article/details/137518111?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22137518111%22%2C%22source%22%3A%22weixin_43858851%22%7D

    2024年04月12日
    浏览(44)
  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

    HTML CSS JS HTTP 等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘进来能干活,能产出

    2024年04月27日
    浏览(49)
  • xhr、jQuery、axios、fetch、vue-resource简单了解和对比

    不常用(太麻烦),一般进行二次封装,或者使用成型的第三方封装jQuery,axios等。axios和jQuery都是对xhr的封装。 核心是封装Dom操作,80%的内容都是关于Dom的,Vue和React的使用是为了减少自己进行dom操作,所以没有必要引入jQuery, 多数且推荐使用axios。 是promise风格的, 并且支

    2024年01月19日
    浏览(36)
  • JavaScript XHR、Fetch

    1 前端数据请求方式 2 Http协议的解析 3 XHR的基本用法 4 XHR的进阶和封装 5 Fetch的使用详解 6 前端文件上传流程 早期的页面都是后端做好,浏览器直接拿到页面展示的,用到的是jsp、asp、php等等的语言。 这个叫做服务器端渲染SSR。 这里后端向前端发送数据,数据结果前端渲染

    2024年02月17日
    浏览(33)
  • 【前端面经】网络-Axios

    Axios是一种流行的JavaScript库,用于在浏览器中进行HTTP请求。它基于Promise API,使其非常易于使用和与其他库集成。Axios提供了许多功能,例如请求和响应拦截,自动转换JSON数据等等。在本篇博客中,我们将讨论Axios背后的原理以及如何使用它进行HTTP请求。 Axios是建立在XMLHtt

    2024年02月02日
    浏览(37)
  • 前端基于axios请求下载文件(后端返回Blob文件流)

    前端小白第一篇csdn文章就当自己记录学习啦! 我自己遇到的情况写在前面防止有人和我不一样,浪费时间浏览; 调用下载接口后端给我返回的数据格式(即文件流格式)如下: 1.按钮定义点击事件 2.调用后端接口 在使用 axios 请求下载文件 api 接口时,注意区分不同请求方法

    2024年02月11日
    浏览(61)
  • 基于Vue、Axios、Node.js的图书管理系统【网页前端高级编程】

    本图书管理系统是基于Vue、Ajax、Node.js等技术的管理系统,笔者给其命名为阳光图书管理系统,意味着我们这个年纪应该活得洒脱像阳光一样,应充满活力与信心。再此感谢老师朋友的悉心指导,由于此系统是笔者初次完成的一个小型管理系统,必定有许多纰漏,如有不足请指正。

    2024年02月09日
    浏览(153)
  • 【网络编程】——基于TCP协议实现回显服务器及客户端

    个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】【Java系列】 本专栏旨在分享学习网络编程的一点学习心得,欢迎大家在评论区交流讨论💌 TCP提供的API主要有两个类 Socket ( 既会给服务器使用也会给客

    2024年02月03日
    浏览(62)
  • 前端实现vue3使用axios调用后端接口

    作用是: 抛出基础请求方式、基础前缀、请求头信息、参数、超时时间、凭证、后端接口返回数据类型! 作用是:使用请求拦截器和响应拦截器解决下边的问题 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消

    2024年01月20日
    浏览(43)
  • 前端实现真实可动态变化进度条,axios+ Ant Design Vue实现.

    最近有一个新需求,要求在前端实现真实的进度条展示,我首先想到了  Ant Design Vue的upload组件, 在antd官网里upload组件不仅有上传功能,并且还附带了 Progress 进度条组件, 还拥有上传成功和失败的两种状态的区分,可以说是十分贴心了,如图  但是很可惜这个组件上传文件的话,你要

    2024年02月09日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包