# axios **Repository Path**: survive2/axios ## Basic Information - **Project Name**: axios - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-08-27 - **Last Updated**: 2024-08-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: HTML, JavaScript ## README # ajax / axios ajax ： async javascript and xml 作用：异步请求 > 同步请求 核心对象：XMLHttpRequest 基于浏览器实现 node.js: 是一个javascript的运行引擎（环境）（脱离于浏览器） 在实际开发中，使用 axios ## js对象 js对象： 一组属性的无序集合 ，以name:value key:value的形式存在 ，多个键值对用,隔开 ,属性名都是字符串类型，value是任何的js类型（包含基本类型和引用类型） 声明： {} ~~~javascript let user={ "name":"张三", "age":12, "cn":false, "height":undefined, "weight":null, "id":Symbol("sss"), "concat":{ "mobile":"13441", "qq":"1545444" }, "hobby":["读书","写字"], "info":function(){ console.log("....") } };//声明了一个对象 ~~~ 任何对象都有一个原型(Prototype 类似于java中的Object ) 扩展：JSON 对象 （是一种特殊的js对象 ，值的类型有要求：字符串 数字 boolean null 对象 数组 ） 表示 数据的 > js的数据类型： > > 基本类型： > > * 字符串 string > * 数字 number > * boolean > * undefined 未定义 > * null (不具备以对象原型) > * symbol 独一无二的 > > 引用类型： > > * 对象 > * 数组 > * 函数 ## 声明变量 * var 不具备块作用域 * let 具备块作用域 * const 声明常量 的 ## XMLHttpRequest `XMLHttpRequest`（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据 js是基于对象的编程，早先js中没有类的概念 回调函数： 做为参数传递的函数 ## Restful api 一种接口api的设计方式，同一个资源（url路径），不同的动词表示不同的作用 如路径: /user * get /user/1 读取id=1的用用户 * get /users 读取所有的用户 * post /user 新建 * put /user 修改 * delete /user 删除 ## JSON字符串与对象相互转换 * JSON.parse() 将json格式的字符串转换成json对象 * JSON.stringify() 将json格式的字符串转换成json对象 ## CORS policy 跨域： 不同源 就是跨域 同源策略：协议 域名 端口号 三项一致 http://localhost:8080/index.html http://localhost/index.html 不同源 http://localhost:8080/index.html https://localhost:8080/a.html 不同源 http://by.com/index.html http://www.by.com/a.html http://www.baidu.com/a/b.html http://www.baidu.com/index.html 同源 ## axios Axios 是一个基于 *[promise](https://javascript.info/promise-basics)* 网络请求库，作用于[`node.js`](https://nodejs.org/) 和浏览器中 > 接口编程 ### 特性 - 从浏览器创建 [XMLHttpRequests](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) - 从 node.js 创建 [http](http://nodejs.org/api/http.html) 请求 - 支持 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) API - 拦截请求和响应 - 转换请求和响应数据 - 取消请求 - 超时处理 - 查询参数序列化支持嵌套项处理 - 自动将请求体序列化为： - JSON (`application/json`) - Multipart / FormData (`multipart/form-data`) - URL encoded form (`application/x-www-form-urlencoded`) - 将 HTML Form 转换成 JSON 进行请求 - 自动转换JSON数据 - 获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间） - 为 node.js 设置带宽限制 - 兼容符合规范的 FormData 和 Blob（包括 node.js） - 客户端支持防御[XSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery) ### API * ##### axios(config) config 配置对象 * ##### axios.get(url[, config]) []代表里面的参数是可选的 * ##### axios.delete(url[, config]) * ##### axios.post(url[, data[, config]]) * ##### axios.put(url[, data[, config]]) ### get/post请求的区别 * get 请求 > 1. 参数显示在地址栏 url?param=value¶m=value > > 2. 地址栏url长度是有限制的 > > ![image-20240826112718048](assets/image-20240826112718048.png) * post请求 1. 参数是以payload形式传递的 表单数据 不会显示在地址栏 2. 长度 理论上没限购 ## 认证登录 * session/cookie认证 会话技术 session是服务端会话 cookie是客户会话 * token 令牌 特殊的 加密过的字符串 ## http状态码 * 1xx * 2xx 请求成功 * 3xx 重定向 * 4xx 客户端错误 404 请求的资源找不到 * 5xx 服务器错误 ## [XSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery) CSRF（Cross-site request forgery跨站请求伪造 ## 拦截器 * 请求前拦截 修改参数 如 token 做为公共参数 传递 * 响应拦截 # Promise 承诺 ### setTimeout(functionRef, delay) 延迟执行 定时执行 在delay毫秒后 执行函数functionRef 回调函数: 做为参数传递的函数 回调地狱: 回调函数层层嵌套，导致代码结构变得复杂、难以理解、难以维护的情况。 ### Promise介绍 Promise 对象表示异步操作最终的完成（或失败）以及其结果值。 状态： * *已兑现（fulfilled）*：意味着操作成功完成。 接口请求成功 * *已拒绝（rejected）*：意味着操作失败。 接口请求失败 ### 使用 1. 创建Promise对象 该对象有一个参数 参数的类型是一个函数 2. 函数有两个参数： > 1. resolve 已兑现 的状态 参数的类型 也是函数 该函数 有一个参数代表接口返回的结果 > 2. reject 已拒绝 的状态 参数的类型 也是函数 该函数 有一个参数代表失败的结果 快捷的方式创建Promise对象： * **`Promise.resolve()`** 静态方法将给定的值转换为一个 [`Promise`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) * **`Promise.reject()`** 静态方法返回一个已拒绝（rejected）的 `Promise` 对象 ### 原型方法 * then(res) 用来接收 resolve对应的结果 处理接口请求正常时的结果 * catch(e) 用来接收reject对应的结果 失败 扩展的方法： * **`finally()`** 无论成功与拒绝 都会执行 # 异步函数 async > main > > t.start() 线程要执行10s > > System.out.println("sssss") async await 两个同时使用，await 关键字必须在async函数里使用 # es6模块 （掌握） 模块： 一个js文件就是一个模块，作用就是代码的复用 node.js出现以后 > node.js早期使用的是 CommonJS规范 require 引入模块 moudle.exports暴露 > > 在node.js12版本开始，node.js支持es6模块 关键字： * export 导出 暴露接口用的 用于暴露一个模块中的变量 函数 对象 等 。。 ~~~javascript 1.export let v=''; 2.export {模块暴露的 名称} //引入只能通过 import {} 引入 import {模块暴露的名称} from '模块地址' ~~~ * import 导入 引入模块中暴露的接口 (变量 函数 对象 ) * as 起别名 在导出时起别名 或在导入时起别名 （隐藏真实接口 好记...） * export default （default可以理解为是一个变量名，将后面的值赋值给该变量 ） 一个**模块中只能使用一次**，同时可以使用多个export , 在使用import 引入 时，可以省略{} ,同时引入的**名称可以自定义** ~~~javascript //配置服务器地址 let url = "http://localhost:8080" //暴露 export default{ url } //import {default as tmp} from './env.js'//将default做为变量名来使用了 //实际开发 针对export default 引入时省略{} 同时变量名可以起任意名称 import host from './env.js' ~~~ ### 复合使用 将export 与import 结合使用 ~~~javascript import {name,concat,info} from './user2.js' let x=12; export {name,concat,info,x} ~~~ 复合 ~~~javascript export {name,concat,info} from './user2.js' //效果等同于 达到模块继承的功能 继承user2.js模块 import {name,concat,info} from './user2.js' export {name,concat,info} ~~~ # 扩展Node.js模块（了解） CommonJS 模块系统。CommonJS 模块系统使用 `require()` 函数来同步加载模块，使用 `module.exports` 或 `exports` 来导出模块。 在模块中，有一个内置对象叫module ~~~javascript module>>> { id: 'E:\\workspace\\jsdemo\\17node.js模块\\user.js', path: 'E:\\workspace\\jsdemo\\17node.js模块', exports: {}, filename: 'E:\\workspace\\jsdemo\\17node.js模块\\user.js', loaded: false, children: [], paths: [ 'E:\\workspace\\jsdemo\\17node.js模块\\node_modules', 'E:\\workspace\\jsdemo\\node_modules', 'E:\\workspace\\node_modules', 'E:\\node_modules' ] } ~~~ 在module.exports属性 对象类型的，你要暴露的接口加入module.exports指向的对象就可以了 ![image-20240827112032695](assets/image-20240827112032695.png) # node.js Node.js 是一个**开源的、跨平台的 JavaScript 运行时环境**，它允许你在服务器端运行 JavaScript。Node.js 使用 V8 引擎（Google Chrome 的 JavaScript 引擎）来执行代码，从而使得 JavaScript 能够在服务器端执行复杂的任务。Node.js 的出现极大地改变了 Web 开发的面貌，使得开发者能够使用同一门语言（JavaScript）来处理前端和后端的开发任务。 ```javascript node test.js ``` ### npm `npm`（Node Package Manager）是 Node.js 的包管理器，它是 Node.js 生态系统中不可或缺的一部分。npm 允许你安装、共享和管理 Node.js 包（也称为模块或库） # node.js Node.js 是一个**开源的、跨平台的 JavaScript 运行时环境**，它允许你在服务器端运行 JavaScript。Node.js 使用 V8 引擎（Google Chrome 的 JavaScript 引擎）来执行代码，从而使得 JavaScript 能够在服务器端执行复杂的任务。Node.js 的出现极大地改变了 Web 开发的面貌，使得开发者能够使用同一门语言（JavaScript）来处理前端和后端的开发任务。 ## npm `npm`（Node Package Manager）是 Node.js 的包管理器，它是 Node.js 生态系统中不可或缺的一部分。npm 允许你安装、共享和管理 Node.js 包（也称为模块或库） > nvm 可以兼容多个node.js版本 nvm全英文也叫node.js version management，是一个nodejs的版本管理工具 **主要功能：** - **包管理**：NPM 可以帮助你安装并管理项目所需的各种第三方库（包）。例如，可以通过简单的命令来安装、更新、或删除依赖。 - **版本管理**：NPM 支持版本控制，允许你锁定某个特定版本的依赖，或根据需求选择最新的版本。 - **包发布**：NPM 允许开发者将自己的库发布到 NPM 仓库中，其他开发者可以通过 NPM 下载并使用这些库。 - **命令行工具**：NPM 提供了强大的命令行工具，可以用于安装包、运行脚本、初始化项目等多种操作。 ## 仓库镜像 npm 默认使用国外的服务器 > * 设置配置 npm config set = > * 查看设置 npm config get > * 查看所有的配置 npm config list ### 直接更改仓库地址 ~~~shell #查看默认地址 npm config get registry https://registry.npmjs.org #更改淘宝镜像 npm config set registry=https://registry.npmmirror.com ~~~ ### 安装cnpm ~~~shell npm i -g cnpm --registry=https://registry.npmmirror.com ~~~ ### 查看安装模块 ~~~shell #查看当前项目的依赖 npm list #查看全局安装 的 npm list -g #查看node.js安装目录 npm prefix -g #查看全局模块安装路径 npm root -g ~~~ ## 初始化工程 ~~~shell npm init ~~~ ## 安装依赖 * 全局安装 ~~~shell #全局安装 npm i -g 模块名@版本号 # -g 代表全局安装 ~~~ * 局部安装 > 安装的依赖只在当前项目使用 > > ~~~javascript > npm install 模块名 // 默认安装指定模块的最新版本 > npm i 模块名@version //安装指定的版本 > > npm i 模块 --save //安装依赖的同时 将依赖关系 添加到package.json文件中 > > npm i /install 安装所有的依赖 > ~~~ > > 相对路径： > > * ./ 代表当前目录 > * ../ 代表上一级目录 ## 卸载模块 ~~~shell #卸载 npm uninstall 模块名 # unlink, remove, rm, r, un #全局卸载 npm un -g cnpm #查看 npm list # npm ls ~~~ ## 查找命令 ~~~shell #搜索 npm search 模块名称 #查看模块详情 npm view 模块名称 ~~~ ## 更新模块 ~~~shell npm update --save 模块名称 #升级版本 ~~~ ## 版本号 使用 NPM 下载和发布代码时都会接触到版本号，NPM 使用语义版本号来管理代码，这里简单介绍一下。 语义版本号分为 **X.Y.Z** 三位，分别代表主版本号、次版本号和补丁版本号，当代码变更时，版本号按以下原则更新。 - 如果只是修复 bug，需要更新 Z 位。 - 如果是新增了功能，但是向下兼容，需要更新 Y 位。 - 如果有大变动，向下不兼容，需要更新 X 位。 版本号有了这个保证后，在申明第三方包依赖时，除了可依赖于一个固定版本号外，还可依赖于某个范围的版本号。例如 "argv": "0.0.x" 表示依赖于 0.0.x 系列的最新版 argv。 ------ ## NPM 常用命令 NPM 提供了很多命令，可以使用 **npm help** 可查看所有命令。 - **`npm init`**：初始化一个新的 Node.js 项目，生成 `package.json` 文件。 - **`npm install `**：安装某个包并将其添加到项目的依赖中。 - **`npm install`**：安装 `package.json` 文件中定义的所有依赖。 - **`npm uninstall `**：卸载某个包并从依赖中移除。 - **`npm update`**：更新项目中所有的依赖包到最新版本。 - **`npm run