# open source code **Repository Path**: QQ1815304465/open-source-code ## Basic Information - **Project Name**: open source code - **Description**: 存放第三方源代码的地方 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2024-09-15 - **Last Updated**: 2025-02-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # vuex 在运行 `createStore` 函数时，内部执行 `new Store` 构造函数。 **`new Store` 做了哪些事？** - 初始化，向自身实例对象添加 `_mutations`、`_actions`、`_wrappedGetter` 对象。 - 安装模块：将每个模块的配置项添加到 `Store` 实例中。对于开启 `modules` 的模块进行递归处理。 - 模块的 `mutations` 放入 `Store` 实例之前，会进行封装在运行时会将 `Store` 实例的 `state` 传给每一个 `mutation` 函数。 - 模块的 `getters` 放入 `Store` 实例之前，会进行封装在运行时会将 `Store` 实例的 `state` 和 `getters` 传给每一个 `getter` 函数。 - 模块的 `actions` 放入 `Store` 实例之前，会进行封装在运行时会将 `Store` 实例的 `state` 、`getters`、`commit`、`dispatch` 传给每一个 `action` 函数。 - 重置仓库状态：循环 `Store` 实例的 `_wrappedGetter` 对象，将每一项使用 `computed` 函数包裹转为响应式数据并赋值到 `Store` 实例的 `getters` 对象中，同时将 `Store` 实例的 `_state` 属性通过 `reactive` 函数转为响应式数据。 > 注意: 在安装模块时会将 `Store` 实例不同属性或方法传递给不同的配置项，需要注意的是传递过去的 `state` 、`getters` 分为**全局**和**局部**两种。 > > 局部表示**当前模块**设置的 `state` 、`getters` 。 **`commit` 函数做了哪些事？** 在 `Store` 实例中的 `_mutations` 找到对应的 `mutation` 函数执行。 **`dispatch` 函数做了哪些事？** 在 `Store` 实例中的 `_actions` 找到对应的 `action` 函数，在 `Promise.resolve` 中执行 `action` 函数，最后返回一个新的 `Promsie` 对象，其状态和 `Prmise.resolve` 一致。 # axios 在运行 `axios` 函数时，内部执行 `createIntance` 函数。 **`createIntance` 函数做了哪些事？** - 执行 `new Axios` 构造函数并传入一个默认配置项。 - 通过 `bind` 函数绑定 `Axios` 实例对象的 `request` 会返回一个函数。 - 将 `Axios.prototype` 和 `Axios` 实例对象都赋值给该函数，这是为了让 `Axios` 可以像 `Fetch API` 一样运行。 - 对该函数新增 `create` 方法，递归执行 `createIntance` 函数，并将默认配置和新的配置合并后作为参数传入。 **`new Axios` 的 `request` 方法做了哪些事？** > `request` 函数接收两个参数，一个是 `URL`，另一个是 `config`。 - 将 `config` 和默认配置合并得到新的 `config` 对象。 - 运行请求拦截器的 `runWhen` 函数返回结果不为 `false` 时将 `请求拦截器函数` 添加到 `requestInterceptorChain` 数组中。 - 添加 `响应拦截器函数` 到 `responseInterceptorChain` 数组。 - 根据请求拦截器的 `synchronous` 属性，判断请求拦截器函数是否异步执行。 - 为 `true` 表示同步执行，先循环执行请求拦截器函数，在通过 `dispatchRequest` 函数发送请求，最后执行响应拦截器函数。 - 为 `false` 表示异步执行，创建数组将请求函数 `dispatchRequest` 函数放进去，在数组的头部添加请求拦截器，在数组尾部添加响应拦截器，循环数组使用 `Promise.resolve.then` 执行。 **`dispatchRequest` 函数如何发送请求的？** > `dispatchRequest` 函数接收一个参数 `config`。 - 执行 `transformRequest` 函数(`该函数允许你在请求被实际发送之前修改请求数据`)将返回结果赋值给 `config.data`。 - 如果请求方法是 `post、put、patch` 其中一个的话，给 `config.headers.Content-Type` 设置为 `application/x-www-form-urlencoded`。 - 在全局对象 `adapters` 中拿到请求函数。 - 请求函数运行并将 `config` 传入，请求函数会返回 `Promsie` 通过 `then` 方法接收，不管 `Promise` 状态是成功还是失败都要执行 `transformResponse` 函数(`该函数根据响应数据的类型对响应数据进行不同的处理`)。 # redux - 在执行 `createStore` 时先派发一个类型为`@@redux/INIT`的`action`得到初始状态后返回一个对象内部包含`dispatch`、`getState`、`subscribe`等方法。 - 在执行`dispatch`时实际上就是将之前传入的`reducer`函数执行一边得到返回值作为新的状态，通过 `getState`去获取最新的状态。 - `combineReducers`函数先将传入的`reducers`循环一边查看每个`reducer`函数是否为空，为空则抛出警告，再次循环去验证每个`reducer`函数的合法性(派发`@@redux/INIT`和`@@redux/PROBE_UNKNOWN_ACTION`action去验证)，最后返回一个函数（**是createStore中的reudcer函数**），该函数运行会遍历`reducers`拿到每一个`reducer`函数执行得到初始状态保存到对象中返回出去。 - `compose`函数接收一个数组返回一个函数，函数运行后让数组最后一项先执行并将返回结果交给数组前一项。 - `applyMiddleware`函数接收一个数组返回一个函数，内部会使用 `createStore` 创建仓库将仓库状态交给数组的每一项在从后向前执行数组内的函数。