现代Javascript提供了许多向远程服务器发送HTTP请求的方法。从原生XMLHttpRequest对象到Axios等第三方库，拥有如此丰富的选择集合使得在web应用程序中请求和动态加载内容比以往任何时候都更加轻松。
本文翻译自How to make HTTP Requests in native Node.js
github 地址：https://github.com/qq44924588...
xhr.onreadystatechange = function() { 当事件发生时执行的代码 }
在现代Web应用程序开发中，经常需要使用Ajax技术进行与服务器的交互，以获取数据、发送请求或更新数据等。Vue3是一种流行的JavaScript框架，为我们提供了许多工具和库来简化和优化与服务器的通信。其中一个常用的工具是axios，它是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中发送HTTP请求。本文将详细介绍Vue3中使用axios进行Ajax请求的方法和技巧。
我第一次接触ajax是从JQuery ajax开始的。但是对于现在的脚手架方式，不会有人往项目中引入jQuery。因为JQuery已经不太常用了。
在Vue中是不支持发送ajax请求的，如果我们要在Vue中发送ajax请求，我们需借助第三方插件 常用发送ajax请求插件有两个 vue-resource和axios,Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
回归正题，我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。
在Vue.js的框架中，如果要发送ajax请求是需要借助外部库的。在vue1.0版本官方推荐的vue-resource、vue2.0版本官方推荐的axios，或者也可以使用jquery来发送ajax请求。
原文链接：https://bobbyhadz.com/blog/react-send-request-on-click[1]
如果要全局使用axios就需要在main.js中设置成全局的，然后再组件中通过this调用
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
在业务开发的过程中，一般存在旧项目是使用Django模板开发的，这种并未前后端分离，这时候新来了一些需求，需要后面的app模块 具备 前后端分离 的 跨域API请求。
打开 http://localhost:3000/，可以在 Resources 中看到所有的接口
Axios是一个基于Promise的HTTP客户端库，可以用于在浏览器和Node.js中发送HTTP请求。为了方便使用，我们可以对Axios进行封装，将常用的配置项和请求方法封装起来，使其更易于使用。
使用Django服务网页时，只要用户执行导致页面更改的操作，即使该更改仅影响页面的一小部分，它都会将完整的HTML模板传递给浏览器。但是如果我们只想更新页面的一部分，则不必完全重新渲染页面-这时候就要用到AJAX了。
以下的axios网络请求的代码都在Vue项目src文件夹下的main.js中完成。
业务上经常出现这个问题，需要拦截某些特定请求，在该特定请求，页面采取或不采取什么变化
axios作为jquery中ajax的替代产物，越来越多的被前端工程师所使用，这个npm包的使用非常灵活和强大，并且在nodejs端和浏览器端通用，在浏览器端axios内部封装的是XMLhttprequest对象，在nodejs端封装的是http核心模块。
JQuery时代，我们使用ajax向后台提交数据请求，Vue时代，Axios提供了前端对后台数据请求的各种方式。 什么？还不知道？还不知道就自己去补课，我默认大家都知道了。算了我是暖男，在贴一下给大家看看，下次可别忘了哈。
Axios是一个异步请求技术，核心作用就是用来在页面中发送异步请求，并获取对应数据在页面中进行渲染，页面局部更新技术Ajax.
原文链接：https://meticulous.ai/blog/fetch-vs-axios/[1]
1、 利用npm安装npm install axios --save 2、 利用bower安装bower install axios --save 3、 直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//当实例创建时候修改配置 instance.defaults.headers.common["Authorization"] = AUTH_TOKEN; 3、 配置中的有优先级
POST请求是一种HTTP请求方法，常用于用于向指定的资源提交要被处理的数据。与GET请求不同，POST请求将数据包含在请求的消息体（body）中，而不是在URL的查询参数中。通过POST请求，可以向服务器发送数据，这些数据可以是表单数据、JSON数据、文件等。
axios中文文档：https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
✍️ 作者简介: 前端新手学习中。 💂 作者主页: 作者主页查看更多前端教学 🎓 专栏分享：css重难点教学 Node.js教学 从头开始学习 ajax学习 文章目录 axios 什么是axios axios发起GET请求 axios发起POST请求 直接使用axios发起get请求 直接使用axios发起post请求 axios 什么是axios Axios是专注于网络数据请求的库，相比于原生的XMLHttpRequest对象，axios简单易用。相比于
axios 是一个基于 promise 的 HTTP 库，用于浏览器和node.js的http客户端，支持拦截请求和响应，自动转换 JSON 数据， 客户端支持防御 XSRF。axios2官方链接
从vue2版本开始，vue-resource就不再被vue所维护和支持，官方也推荐使用axios，所以，从我使用axios至今，差不多有四五年了，这四五年的时间只能算是熟练应用，很多内部的实现和原理不清不楚，导致在开发的时候遇到问题，大多数情况都是凭借经验来“猜测”出答案，这就导致内心深处十分的空虚和忐忑，就像是走路的时候脚步虚浮，跌跌撞撞，一点都不平稳。刚好最近的计划是看源码，所以就从axios开始，详细的去解读整个axios的实现，希望这个系列既是笔记也是分享，让大家知道原理，理解场景，懂得实现。ok，下面我们开始进入正文吧。
使用 vue 开发时，频繁使用到了 axios 这个网络请求库，这里对其做一个发起请求时携带参数方式的小结。
axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。
Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。说到get、post，大家应该第一时间想到的就是Jquery吧，毕竟前几年Jquery比较火的时候，大家都在用他。但是由于Vue、React等框架的出现，Jquery也不是那么吃香了。也正是Vue、React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。
在Vue组件中使用代理发起POST请求的方法与使用GET请求类似。 可以使用axios或其他HTTP库来发送POST请求，将请求路径设置为代理路径。
什么是axios呢？了解，并去使用它，对于axios发送请求的两种方式有何了解，以及涉及axios跨域问题如何解决。
用vue cli创建一个vue项目，然后再components目录下创建两个vue组件，分别是Right.vue和Left.vue。文件的代码如下
AJAX(Asynchronous JavaScript And XML):异步的JavaScript 和 XML
引入：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
在陈年的老项目中，通常用Redux、Mobx这样的「全局状态管理方案」无差别对待他们。
1.1 API 的分类 REST API: restful （Representational State Transfer (资源)表现层状态转化） (1) 发送请求进行CRUD 哪个操作由请求方式来决定 (2) 同一个请求路径可以进行多个操作 (3) 请求方式会用到GET/POST/PUT/DELETE 非REST API: restless (1) 请求方式不决定请求的CRUD 操作 (2) 一个请求路径只对应一个操作 (3) 一般只有GET/POST 1.2 使用json-server 搭建RES
我们在开发过程中有时候会碰到这样的需求，连续发送多个ajax请求，请求个数大于等于2，后面的ajax请求发送时，如果前面的ajax请求还没有返回，就取消前面ajax请求回调的执行。
本篇介绍如何在vue端向django发送post请求，以及django处理post请求的方式
如果请求在某个时刻失败，则会发出page.on("requestfailed")事件，而不是'requestfinished'事件（也不是”response”事件）。
定位到D:\dev\project\webpack目录，打开控制台输入创建项目的命令：vue create 项名称
axios.post(url[,data[,OPTIONS]]) 【data：通过请求主体传递给服务器的内容】
工具申请功能，即在前端页面上点击弹层确定的时候，发出请求给后台自己的函数，这个函数再去调用新建工单函数而已。
测试是否成功连接： 打开mysql 运行node服务 npm start 运行vue npm run dev 发现并没有拿到数据，查看控制台报错信息
在这个示例中，我们使用axios.get()方法发送一个GET请求到指定的URL。然后，使用.then()方法来处理成功的响应，并使用.catch()方法来处理请求错误。在成功的情况下，我们可以通过response.data来访问返回的数据，在错误的情况下，我们可以通过error来获取错误信息。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
