IT评测·应用市场-qidao123.com

标题: Ajax中的axios [打印本页]
作者: 络腮胡菲菲    时间: 2024-12-23 04:08
标题: Ajax中的axios
既然提到Ajax，那就先来说一说什么是Ajax吧
关于Ajax

Ajax的定义

   Asynchronous JavaScript And XML：异步的JavaScript和XML。
  
  反正就是一句话总结：
  使用XML HttpRequest 对象与服务器进行通讯。
          AJAX 是一种在无需重新加载整个网页的环境下，能够更新部分网页的技术。（这一句话很好的解释了异步的概念）
无需多言，开始正题
关于axios

什么是axios

Axios 是一个基于Promise的HTTP 客户端，实用于node.js和浏览器。它是同构的（即它可以使用同一套代码运行在浏览器和 nodejs 中）。在服务器端它使用原生的 node.js  http模块，在客户端（浏览器）它使用 XMLHttpRequests。
特性

当然，下面是从官网上找的东西

使用

导入

        我最常用的方法是直接导入地点
  1. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
复制代码
哀求方法


这是在学习过程中做的一些小总结，其实最常用的是get和post方法

其实这两个最大的区别就是在哀求的数据，缓存和安全性的区别

这算是整体一点的，大总结，这四个方法的区别

 get
 post
 put
 delete
形貌
 查看
 创建
 更新
 删除
定义
 从指定资源哀求数据
 向指定资源提交要处理的数据
 更新指定资源的全部内容
 删除指定资源
哀求格式
 参数在 URL 中
 数据在哀求体中
 数据在哀求体中
 通过 URL 指定资源标识符
对服务器性能的影响
 较小

 较大
 较大
 较大
是否实用对同一个资源进行多次操作
 可查询
 否
 否
 否
应用场景
 获取网页、查询数据
 创建新资源
 更新已存在资源（完整更新）
 删除已存在资源
长处
 可以被缓存和浏览器生存。
对服务器性能的影响较小。
 可以提交比 GET 更大的数据量。
相对更安全，因为哀求参数不会被包罗在 URL 中。
 可以更新指定的资源。
 可以永久删除指定的资源。
这是最一开始学习Ajax时做的一个思维导图

语法

  1. axios({
  2.     url:"目标资源地址/要访问的后端接口地址",
  3.     method:"请求方法",    // 请求的方法，GET可以省略（不区分大小写）
  4.     data/params:{    // data是提交的数据
  5.         参数名1：值1,
  6.         参数名2：值2
  7.     }
  8.     // 使用回调函数
  9. }).then((result)=>{
  10.     对服务器返回的数据进行处理
  11. })
复制代码
前提要知道，
怎样使用URL查找对应参数：

使用URL查询参数的作用：浏览器提供给服务器额外信息，获取对应的数据。

而相对应的使用axios查询：
就是使用params参数进行查询，携带参数名和值
例：
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.                 <meta name="viewport" content="width=device-width,
  7.                 initial-scale=1.0">
  8.                 <title>axios——get</title>
  10.                 <style type="text/css">
  11.                         #dv {
  12.                                 border: 1px solid pink;
  13.                         }
  14.                 </style>
  15.         </head>
  16.         <body>
  17.                 <h1>axios_get</h1>
  18.                 <form action="javascript:;" class="example-form">
  19.                         <input type="text" name="name" id="name">
  20.                         <br>
  21.                         <input type="text" name="text1" id="text1">
  22.                         <br>
  23.                         <input type="button" class="btn" id="btn" value="提交">
  24.                 </form>
  25.                 <div id="dv"></div>
  26.                 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  27.                 <script>
  28.                         btn.onclick = function(){
  29.                                 var n = document.getElementById('name').value
  30.                                 var t = document.getElementById('text1').value
  31.                                 console.log(n);
  32.                                 console.log(t);
  33.                                 axios({
  34.                                         url: 'http://localhost:8080/getAjaxTest',
  35.                                         method: 'GET',
  36.                                         params: {
  37.                                                 name: n,
  38.                                                 text1: t
  39.                                         }
  40.                                 }).then(result => {
  41.                                         console.log(result);
  42.                                         console.log(result.data);
  43.                                         var p = document.createElement("p");
  44.                                         p.appendChild(document.createTextNode(result.data));
  45.                                         var ps = document.getElementById("dv").getElementsByTagName("p");
  46.                                         // +的优先级比？高,所以要加括号
  47.                                         new Function("p", "ps", 'document.getElementById("dv").' + (ps[0] ?
  48.                                                 "insertBefore(p, ps[0])" : "appendChild(p)"))(p, ps);
  49.                                 }).catch(error => {
  50.                                         console.log(error);
  51.                                 });
  53.                         }
  54.                 </script>
  55.         </body>
  56. </html>
复制代码
就会由于使用params的方式，会从网络中表现出来，（如果不清楚，可以看下面的查找错误）


主要可以看这里的思路和结构，其实这里也有一个知识点：
在 params的参数中，如果参数名和值一样，可以只写一个：
  1. params: {
  2.     name,    // 当参数名和值都为name
  3.     text1
  4. }
复制代码

错误处理

在then方法的后面，通过点语法调用catch方法，传入回调函数并定义参数
  1. axios({
  2.     // 请求选项
  3. }).then(result=>{
  4.     // 处理数据
  5. }).catch(error=>{
  6.     // 处理错误
  7. })
复制代码
在哪用：
注册账号时，重复注册时通过弹窗提示用户错误原因
查找错误：


这就是我们需要相识的HTTP协议--哀求报文和响应报文
哀求报文：


响应报文：

例：
还拿上一个我的代码举例：

这是点击提交后的页面结果
接下来我们看提交结果的内部是什么样的

在这里可以明显看出来哪里是响应哪里是哀求
算了还是用edge吧


哀求报文在标头那里
所以可以依据这些查看是客户端还是服务端的错误
最后一些需要注意的点

既然最开始提到了params和data，那他们有什么区别呢
比力项目
 data 参数
 params 参数
传输方式
 放在哀求体中传输
 通过 URL 进行传输，拼接在 URL 末尾
使用场景
 实用于 POST、PUT、PATCH 等非 GET 哀求，用于向服务器提交数据以创建、更新或修改资源
 主要用于 GET 哀求，让服务器根据参数筛选、排序或返回特定资源
数据大小限定
 相对没有严格的雷同 URL 长度那样的限定（实际受服务器配置等因素影响），更适合大量数据传输
 受 URL 长度限定，过长 URL 可能导致哀求失败
安全性
 不在 URL 中表现数据，肯定水平上保护隐私和安全性，适合传递敏感信息
 数据在 URL 上可见，不适合传递敏感信息如暗码等

就先说这些吧，其他的如果什么时间想起来了，可能会继续增补（固然可能性不大）
如果文章中有什么错误，接待在评论区提出。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4