1.TypeScript封装axios——Vue3+Ts实践
2.React组件设计-仿网易有道翻译主页
3.Ajax、码介Fetch、码介Axios 篇
4.JS逆向 | *毛租(AES)，码介一个较难分析的码介网站
5.vue为何弃用经典的jquery.ajax,选择新技术axios?
6.Axios源码深度剖析 - AJAX新王者

TypeScript封装axios——Vue3+Ts实践

       在Vue3 + TypeScript的项目中，封装axios库以提升代码质量、码介降低耦合度并提高维护性。码介语音聊天源码选择封装的码介原因主要有两个：一是减少每个模块对axios的依赖性，避免因第三方库维护问题而引发的码介复杂修改；二是解决在发送网络请求时的重复代码问题，如添加token、码介显示加载等。码介

       通过面向对象的码介思想封装axios，首先定义了axios实例类型以及响应和请求配置的码介类型，确保了代码的码介类型安全。为了解决axios源代码中缺少拦截器属性的码介问题，引入了接口扩展和类的码介方法来支持自定义拦截器。在封装的过程中，通过接口定义了拦截器的结构，并且利用类的方法实现了请求和响应的拦截器设置，以及控制加载状态的功能。这样，封装后的axios不仅支持了基本的请求和响应操作，还提供了高度定制化的功能，使得在不同模块中重用相同的网络请求逻辑变得可能。

       封装后的axios实例可以作为全局资源在项目中使用，例如在创建request.ts文件中，通过定义HRequest类来管理请求配置和拦截器的设置。这样，每个请求都可以通过HRequest实例调用，同时可以统一管理加载状态，比如在每个请求时显示加载提示。通过将HRequest实例导出，其他部分可以轻松引用，实现代码的复用和维护。

       封装后的axios不仅简化了代码结构，提高了代码的可读性和可维护性，还使得项目在扩展和维护过程中变得更加灵活。通过封装，可以方便地在不同项目中重用这一套网络请求处理逻辑，从而节省了开发时间并提高了代码质量。

React组件设计-仿网易有道翻译主页

       前言

       React组件化开发非常有利于搭建项目，也提高了组件的复用性。由于频繁使用网易有道翻译这个软件，让我萌生出想要征服ta的冲动。开发过程中遇到了些许问题，页面还有很多功能还未完善，现在只有一个首页，人力资源管理系统源码后续功能持续完善中。

前期准备

       在组件页面成型之初需要几个开源组件库：

       axios：它是一个基于promise的网络请求库，用于获取后端数据（fastmock网站可以让你在没有后端程序的情况下能真实地在线模拟ajax请求），是前端常用的数据请求工具；

       antd-mobile：由蚂蚁金融团队推出的一个开源的react组件库,这个组件库拥有很多使用的组件；

       swiper：能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。

       styled-compenonts：真正的cssinjs，增强CSS以对React组件系统进行样式设置的结果，具有简单的动态样式、轻松维护等优点。

正文

       组件展示?

组件设计思路

       顶部：用flex布局，方便快捷（一切皆可flex）

       搜索栏：使用antd-mobile组件库的SearchBar，点击转跳到搜索页面

       图标轮播和轮播图：主要使用swiper进行设计，实现自动轮播效果

       底部栏：用fixed固定住

组件封装

       先对项目进行脚手架的建构（使用vite脚手架，使用起来快速方便）

npminit@viteja/app

       src下的目录内容

       api：存放与数据相关的链接，组件所有的数据将会在这一个文件夹下的request.js中使用ajax进行数据请求

       assets：存放静态资源，font、image等

       components：放置重复使用的组件

       config：存放页面标题配置

       modules：配置页面自适应横竖屏

       pages：各个页面

       routes：页面的路由

搜索栏

       直接使用antd-mobile的SearchBar

importReactfrom'react'import{ SearchBar}from'antd-mobile'import{ Link}from'react-router-dom'import{ Wrapper}from'./style'

       exportdefaultfunctionSearch(){ return(

{ /*点击搜索框跳转搜索页面*/}

       )}```

数据请求

       前端页面数据的展示不能写死在代码里面，需要数据请求，fastmock则走入了我的视野，在线接口Mock工具fastmock?在线模拟ajax请求（fastmock在没有后端程序的情况下可以实现ajax请求，有需要的小伙伴可以去尝试）

       api文件夹下的request.js进行axios数据请求

importaxiosfrom'axios'exportconstgetBanners=()=>axios.get('/post/

Ajax、Fetch、Axios 篇

       Ajax是async javaScript and xml的缩写，是一种可以扩展的文本标记语言，常用于从服务端返回数据结构，现在基本都是使用 json 格式返回数据。在不刷新全局的条件下，局部刷新页面是Ajax的主要作用。

       创建Ajax实例的方法为let xhr = new XMLHttpRequest()，注意：IE6不兼容这种写法。打开请求时，配置请求前的配置项共有5个参数，包括：xhr.open([/api/'，这将设置一个Authorization头，覆写掉现有的任意使用headers设置的自定义Authorization头；auth表示HTTP基础验证应当用于连接代理，并提供凭据；这将会设置一个Proxy-Authorization头，覆写掉已有的通过使用header设置的自定义Proxy-Authorization头。

       Axios可以说把请求这件事做到了极致，封装的很好用，浏览器支持的方法，除了IE低版本以外，最新版的浏览器都是支持的。

       Fetch是http的数据请求方式，是劫持源码XMLHttpRequest的一种代替方案，没有使用到XMLHttpRequest这个类。fetch()采用模块化设计，API分散在Response对象、Request对象、Headers对象上。fetch()通过数据流（Stream对象）处理数据，对于请求大文件或者网速慢的场景相当有用。XMLHttpRequest没有使用数据流，所有的请求都必须完成后才拿到。在默认情况下fetch不会接受或者发送cookies。

       fetch(url,optionObj)基本使用中，fetch参数没有同步的设定，因为fetch是基于promise封装的本身就是异步的。fetch虽然使用的是promise封装，但是catch函数不能直接捕获到错误，需要在第一个then函数内做些操作。fetch发送post请求时，当发生的是跨域请求，fetch会先发送一个OPTIONS请求，来确认服务器是否允许接受请求，这个请求主要是用来询问服务器是否允许修改header等一些操作。服务器同意后返回，才会发送真正的请求。没有发生跨域的情况下不会产生两次请求。

       fetch的三个模块包括：Response对象、Request对象、Headers对象。

       fetch发送post两次请求的原因是在使用fetch发送post请求时如果是跨域，那么导致fetch第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

       fetch的缺点包括：get/head请求不能设置body属性；fetch请求后，服务器返回的状态码无论是多少包括(4xx,5xx)，fetch都认为是失败的，也就是使用catch也不能直接捕捉到错误，需要再第一个then中做一些处理。

       Ajax、Fetch、Axios综合中，实现一个Ajax可以将原生的Ajax封装成promise。Ajax、Axios、Fetch的区别包括：传统的Ajax利用的是XMLHttpRequest这个对象，和后端进行交互。截图源码JQueryAjax是对原生XHR的封装，多请求间有嵌套的话就会出现回调地狱的问题。axios使用promise封装xhr，解决了回调地狱问题。fetch不是XMLHttpRequest，fetch是原生的js，使用的是promise。

       fetch使用的是promise方便使用异步，没有回调地狱的问题。要实现一个Ajax请求，可以将原生的Ajax封装成promise。实现两个有顺序的Ajax请求可以使用promise.then()。Ajax解决浏览器缓存问题可以通过设置请求头，例如：anyAjaxObj.setRequestHeader("If-Modified-Since","0") 或 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。

JS逆向 | *毛租(AES)，一个较难分析的网站

       目标网站加密分析

       在研究特定网站时，发现其参数与响应信息被加密，而此加密方式未直接暴露参数名，因此传统搜索方法无法应用。此网站的请求采用POST方式，使用XHR断点或查看Initiator堆栈的方法，希望能揭露加密细节。

       经过分析，发现可疑部分可能与未加密前的参数相关联，并在axios.post函数中执行了一个promise的异步请求。随后，加密处理发生在then后面的函数内，因此加密过程很可能在此函数中进行。尝试跟进代码执行流程，发现加密位置在axios.post函数内。

       通过开发者工具，发现源代码映射问题，通过取消映射设置，成功获取加密前的真实代码。加密算法确定为AES，此部分处理较为直接，主要涉及加解密操作。经过分析后，可以直接处理加密问题，解决方法相对简单。

       为验证解密结果，已将完整代码上传至GitHub，欢迎查看与运行。同时，分享的im 源码代码包含了加密处理的完整流程与解密步骤，方便读者学习与实践。

       总结此分析过程，关键在于识别加密位置、取消代码映射以获取原始代码，以及识别加密算法（AES）进行解密操作。相关代码与详细步骤已整理并提供，希望对学习加密处理与逆向工程的读者有所帮助。

vue为何弃用经典的jquery.ajax,选择新技术axios?

       深入探究 Vue 与 axios、ajax 的关系，首先需要理解，Vue 选择使用 axios 而非 jQuery.ajax，这一决策并非基于放弃 ajax 技术，而是基于性能优化和易用性考量。

       从源码层面来看，axios 确实基于 XMLHttpRequest，即 ajax 技术实现，其封装与优化了 ajax 的使用体验。然而，Vue 选择 axios，并非因为放弃了 ajax，而在于寻求与现代前端开发更好的集成与协同。

       Vue 的目标是提供简洁、高效、可维护的前端框架。在面对复杂的数据交互需求时，axios 以其简洁的 API、Promise 风格的回调机制、以及对异步操作的友好支持，成为 Vue 推荐的 HTTP 客户端首选。

       对比 jQuery.ajax，axios 更注重与 Promise 的集成，这使得 Vue 在处理异步请求时，能够更加流畅、灵活。此外，axios 提供了更丰富的配置选项，如请求超时、请求头自定义等，这些特性对于 Vue 应用的开发具有显著优势。

       在 Vue 生态系统中，axios 作为请求库，与 Vue Router、Vuex 等核心组件相互协作，为开发者提供了一站式解决方案，简化了应用中复杂的网络请求管理。这种协同不仅提升了开发效率，还增强了代码的可读性和可维护性。

       综上所述，Vue 选择 axios 并非放弃 ajax，而是在现代前端开发环境下，对工具的精心挑选与优化。通过与 axios 的集成，Vue 实现了性能与易用性的双重提升，为开发者提供了一套高效、灵活的解决方案。因此，对于这类问题，正确的答案不应是质疑，而是对技术选型背后逻辑的深入理解与尊重。

Axios源码深度剖析 - AJAX新王者

       Axios 是一个基于 Promise 的 HTTP 请求库，支持浏览器和 Node.js 环境。其源码在 GitHub 上开源，欢迎 fork 使用并提出指正。以下为 Axios 的核心目录结构说明，主要关注在 /lib/ 目录下的文件。

       在使用 Axios 时，你可能会遇到多种调用方式，本文将带你深入了解这些方式及其原理。

       首先，我们来了解一下 Axios 的基本用法。你可以使用以下几种方式发起请求：

       1. `axios(option)`：提供一个配置对象进行调用。

       2. `axios(url[, option])`：传入 URL 和配置对象。

       3. 对于 GET、DELETE 等方法：`axios[method](url[, option])`。

       4. 对于 POST、PUT 等方法：`axios[method](url[, data[, option]])`。

       5. 使用默认实例：`axios.request(option)`。

       通过以上方式，你可以轻松发起 HTTP 请求。

       深入源码分析，你将发现 Axios 的强大之处。通过 `axios.js` 文件的入口，核心在于 `createInstance` 方法，该方法能生成一个指向 `Axios.prototype.request` 的 Function，从而实现多种调用方式。

       在 Axios 的核心 `Axios` 类中，`request` 方法是所有功能的中枢，无论是 GET、POST 还是其他方法，最终都通过 `request` 方法实现。

       配置项是 Axios 与用户交互的关键，它涵盖了几乎所有功能的配置。配置项从低到高优先级顺序为：默认配置对象、`defaults` 属性、`request` 方法参数。

       在使用 Axios 时，配置项是如何生效的？答案在于合并多个配置源，最终得到一个综合配置对象。

       此外，Axios 提供了拦截器系统，让你可以控制请求前后的数据处理。每个 Axios 实例都有 `interceptors` 属性，用于管理拦截器，让你实现精细的控制。

       核心的 `dispatchRequest` 方法则负责处理请求流程，包括请求适配器、发送请求、数据转换等步骤。最后，通过 Promise，你可以优雅地处理异步请求。

       数据转换器让你能轻松地在请求和响应数据之间进行转换，如将对象转换为 JSON 格式。默认情况下，Axios 自动处理 JSON 数据转换。

       在使用 Axios 时，你还能灵活地控制超时、取消请求、设置 header、携带 cookie 等功能。通过源码分析，你可以深入理解 Axios 的内部机制。

       总结，Axios 以其强大、灵活的功能和简洁的 API 设计，成为现代应用中不可或缺的 HTTP 请求工具。通过本文的深入探讨，你将对 Axios 的运作机制有更深刻的理解，从而更好地利用其功能。

axios,如何中断请求?

       深入解析 Axios 源码，探讨如何中断请求。在分析过程中，将重点放在了 default.js 文件以及与主动取消 Axios 请求相关的 /cancel 目录，揭示了核心工具方法的运作机制。

       在 default.js 中，导出了十个变量和方法，皆服务于默认功能，为理解和使用 Axios 奠定基础。

       进一步探索 /cancel 目录，了解与取消请求相关的机制，涉及 cancel token API，需在配置中添加 cancelToken 属性，通过回调函数实现取消功能。

       深入分析取消逻辑，从简单的 Cancel 类到 isCancel 方法，再到复杂的 CancelToken 类，逐步揭秘取消请求的内部运作。

       关键点在于 CancelToken 类的实现，通过两层闭包巧妙地将“resolve”暴露给外部，同时提供了用于抛出错误和获取工厂方法的原型方法。

       总结，本篇解析了默认功能的实现和取消逻辑的核心，为理解 Axios 源码提供了重要视角，下篇将继续深入探讨耦合度较高的工具方法，为开发和优化 Axios 提供更多洞察。

分析axios源码来找出无法使用all和spread等方法的原因

       在使用axios进行创建时，若采用axios.create({ })方法，将无法使用all、spread、Cancel、CancelToken、isCancel等方法。

       网上关于此问题的解答，通常是axios维护者建议重新引入axios package以解决问题。然而，这种方法并不理想，因为重新引入会导致axios配置丢失，需要重新配置，相当繁琐。

       在我们的项目中，经常需要使用自定义设置的axios实例，例如设置基础URL和超时时间。设置完成后，我们可以使用newAxios.post来完成需求。但若尝试使用all、spread、Cancel、CancelToken、isCancel等方法，系统会提示方法不存在。

       接下来，我们将分析axios源码，探究为何使用axios.create方法后无法使用all、spread等方法。

       首先，打开axios源码目录下的lib/axios.js文件，这是Axios的入口处，也是create函数所在的地方。让我们看一下create的源代码：

       接下来，我们将逐步解读代码。mergeConfig方法从字面上可以理解为一个合并配置的方法，即合并我们的配置与默认配置，覆盖默认配置。关于合并配置的代码，这里就不详细介绍了。有兴趣的可以查看mergeConfig。因此，现在的代码如下：

       现在，我们来看一下剩下的createInstance函数：

       context变量包含axios实例代码。我们只需知道，实例Axios后，context变量原型链上有request、delete、get、head、options、post、put、patch方法，自身有interceptors对象。

       现在，让我们看看下面的bind和extend方法：

       第一个bind函数是让Axios.prototype.request函数中的this指向context变量。

       后面两个extend方法，是把第二个参数的可枚举对象复制到第一个参数中，即instance变量中。

       从第一个bind方法开始，现在instance变量中有一个request方法。

       然后第二个extend方法，把Axios.prototype里的方法复制到instance变量中。现在instance变量中有request、delete、get、head、options、post、put、patch方法。

       最后第三个extend方法，把context里的方法复制到instance变量中。现在变量中有request、delete、get、head、options、post、put、patch、interceptors、defaults。

       这样就结束了，create方法直接返回instance变量。我们没有在create方法中看到all、spread等方法。这也是为什么使用create方法后无法使用这些方法。那么这些方法在哪呢？还是在lib/axios.js文件中：

       可以看到，这里是把这些方法直接赋值在axios方法上，然后直接暴露出去。所以当我们使用axios时，可以使用all、spread等方法。但使用axios.create就无法使用all、spread、Cancel、CancelToken、isCancel方法。

       如果能改axios源码，可以将lib/axios.js修改如下：

       但是，这当然不可能。所以，我们需要在不改源代码的情况下实现。

       有一个暴力的解决方案，不过我个人比较喜欢：

       很简单，一行代码解决问题。这里之所以要加上注释，是因为在eslint中不允许对__proto__进行重新赋值。