HTTP总结/ xhr封装axios /取消请求

2020-11-25 00:41:15 61 收藏
分类专栏： Network
最后发布:2020-11-25 00:41:15首次发布:2020-11-25 00:41:15
版权声明：本文为博主原创文章，遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener"> CC 4.0 BY-SA </a>版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RollsRoycewk/article/details/110096554
版权

HTTP

  • 超文本传输协议：规定互联网客户端、服务器和服务器之间的通信规则

  • 通信的内容，称为报文

    • 请求报文
    • 响应报文

  • 报文组成：

    • 报文首行
    • 报文头
    • 空行
    • 报文主体

  • 请求报文

    • 请求首行
      • 请求方式 GET(查) POST(增) PUT(全部改) PATCH(部分改) DELETE(删)
      • 请求地址 可能携带查询字符串参数（querystring、params）?key=value&key=value
    • 请求头
      • content-type 请求主体的类型
    • 请求主体
      • POST PUT PATCH请求方式的请求参数

  • 请求体参数类型

    • content-type: application/json json格式的参数 {“name”: “jack”}
    • content-type: x-www-form-urlencoded form表单格式的参数 key=value&key=value

  • 响应报文

    • 响应首行
      • 响应状态码status
        • 1xx 代表请求还未完成，需要进一步处理
        • 2xx 代表请求成功 200
        • 3xx 代表请求重定向
          • 301 永久重定向
          • 302 临时重定向
          • 304 走协商缓存
        • 4xx 代表客户端错误
          • 401 未授权
          • 403 禁止
          • 404 资源找不到
        • 5xx 代表服务器错误
          • 500

原生axios

 // 1.创建xhr对象
 const xhr = new XMLHttpRequest();
 // 2.给xhr绑定onreadystatechange事件
 xhr.onreadystatechange = function () {
   if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status <= 299) {
     console.log(xhr.responseText);
     console.log(xhr)
   }
 };
 // 3.设置请求信息
 xhr.open("GET", "http://localhost:3000/posts");
 // 4.发送请求
 xhr.send();

xhr封装axios

function axios({
  method, // 请求方式
  url, // 请求地址
  data, // 请求体参数 body
  params, // querystring 查询字符串参数
}) {
  return new Promise((resolve, reject) => {
    method = method.toUpperCase();
    // 1. 创建xhr对象
    const xhr = new XMLHttpRequest();
    // 2. 绑定onreadystatechange事件
    // 当readystate发生变化时触发的事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        // 响应返回了（但是成功、失败不知道）
        if (xhr.status >= 200 && xhr.status < 300) {
          // 响应成功
          const response = {
            request: xhr,
            status: xhr.status,
            data: JSON.parse(xhr.responseText),
          };
          resolve(response);
        } else {
          // 响应失败
          console.log("error", xhr);
          reject("error");
        }
      }
    };
    /*
      通常情况下：
        GET、DELETE请求，只会有查询字符串参数
        POST、PUT、PATCH请求，既可以有请求体参数，也可以有查询字符串参数
      params: { name: 'jack', age: 18 } 
        --> url?name=jack&age=18
    */
    let qs = "";
    if (params) {
      // 提取params中所有属性名成为一个数组
      // ['name', 'age']
      qs = Object.keys(params)
        .reduce((p, key) => {
          const value = params[key];
          return p + `${key}=${value}&`;
        }, "?")
        .slice(0, -1);
    }

    // 3. 设置请求信息（请求地址、请求方法。。。）
    xhr.open(method, url + qs);

    let body = "";
    if (
      (method === "POST" || method === "PUT" || method === "PATCH") &&
      data
    ) {
      // 设置请求头
      xhr.setRequestHeader("content-type", "application/json");
      body = JSON.stringify(data);
    }
    // 4. 发送请求
    xhr.send(body);
  });
}

btn1.onclick = function () {
  // 发送GET请求

  axios({
    method: "GET",
    url: "http://localhost:3000/comments",
  })
    .then((value) => {
      // 200-299
      console.log("value", value);
    })
    .catch((reason) => {
      console.log("reason", reason);
    });
};

btn2.onclick = function () {
  // 发送POST请求

  axios({
    method: "POST",
    url: "http://localhost:3000/comments",
    data: {
      // 请求体参数 body
      body: "i like laoluo",
      postId: 3,
    },
  })
    .then((value) => {
      // 200-299
      console.log("value", value);
    })
    .catch((reason) => {
      console.log("reason", reason);
    });
};
</script>

取消方式一

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">发送请求</button>
    <button id="btn1">取消请求</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

    <script>
      const CancelToken = axios.CancelToken;
      const source = CancelToken.source();

      btn.onclick = function () {
        axios({
          url: "http://localhost:3000/comments",
          cancelToken: source.token,
        })
          .then((result) => {
            console.log("resule", result);
          })
          .catch((err) => {
            console.log("err", err);
          });
      };

      btn1.onclick = function () {
        // 取消请求
        source.cancel("取消请求了");
      };
    </script>
  </body>
</html>

取消方式二(常用)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">发送请求</button>
    <button id="btn1">取消请求</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

    <script>
      let cancel = null;
      btn.onclick = function () {
        axios({
          url: "http://localhost:3000/comments",
          cancelToken: new axios.CancelToken(function (c) {
            cancel = c;
          }),
        })
          .then((result) => {
            console.log("resule", result);
          })
          .catch((err) => {
            if (axios.isCancel(err)) {
              console.log("错误是取消请求导致的", err);
              return;
            }
            console.log("err", err);
          });
      };

      btn1.onclick = function () {
        // 取消请求
        cancel("取消请求了");
      };
    </script>
  </body>
</html>

取消方式三

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">发送请求</button>
    <button id="btn1">取消请求</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script>
      let cancel = null;
      btn.onclick = function () {
        axios({
          url: "http://localhost:3000/comments",
          cancelToken: new axios.CancelToken(function (c) {
            cancel = c;
          }),
        })
          .then((result) => {
            console.log(result);
          })
          .catch((err) => {
            console.log(err);
          });
      };

      btn1.onclick = function () {
        cancel("quxiaoqingqiu ");
      };
    </script>
  </body>
</html>

server

const express = require("express");
const app = express();

app.get("/comments", (req, res) => {
  // 处理跨域 jsop cors
  res.set("Access-Control-Allow-Origin", "*");

  // 让服务器三秒以后再返回响应
  setTimeout(() => {
    res.json({
      code: 10000,
      data: [
        {
          id: 1,
          title: "劳斯宾利法拉利",
        },
      ],
    });
  }, 3000);
});

app.listen(3000,"localhost",(err)=>{
    if (err) {
        console.log("err",err);
        return
    }
    console.log("服务器启动成功,请访问http://localhost:3000");
})
已标记关键词 清除标记
Vue使用axios取消上一次请求
僵小蛋的博客
07-31 7337
项目需求：列表式切换商品，有时候上一次请求的结果非常慢，而我又点了另外一个商品，这时候第二次请求的接口比上一次快，那么就点击第二次的商品看到的信息却是上一次的商品信息，这样的用户体验极其不好； 解决方案：在点击下一个商品的时候，将上一个商品请求的接口中断取消请求。 axios官网给出了取消请求的方法： 方法一： axios.get('/user/12345', { cancelToken...
表情包
插入表情
还能输入1000个字符 “速评一下”
axios 源码深入分析之 XHR 和 axios 的理解和使用
旧城tk的博客
06-28 297
一、XHR 的相关内容 MDN 文档 ：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest 理解 XHR，如下所示： 使用 XMLHttpRequest (XHR) 对象可以与服务器交互, 也就是发送 ajax 请求 前端可以获取到数据，而无需让整个的页面刷新。 这使得 Web 页面可以只更新页面的局部，而不影响用户的操作。 区别 ajax 请求与一般 HTTP 请求，如下所示： ajax 请求是一种特别的 http
axios学习笔记（二）：轻松弄懂XHR的使用及如何封装简易axios
前端岚枫
03-15 765
使用 XMLHttpRequest（XHR）对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。在 AJAX 编程中，XMLHttpRequest 被大量使用。 文章目录1. 理解XHR区别一般http请求与ajax请求3. API4. XHR的ajax封装，也算是简单版的axios4.1 特点4.2 简单版的axio...
axios get请求_Axios取消请求总结篇
weixin_39642990的博客
11-22 22
应用场景取消请求在前端有时候会用到，以下是两个工作中可能会用到的场景tab切换时刷新某个列表数据，如果他们共用一个变量存储数据列表，当请求有延时，可能会导致两个tab数据错乱；导出文件或下载文件时，中途取消 。如何取消请求取消http请求，axios文档里提供了两种用法：第一种：使用 CancelTokenconst{CancelToken,isCanCel}=axios;c...
是！“不会数据分析的，全是假程序员！”HR：太真实......（附资料，建议白嫖）
CSDN学院
11-10 3万+
数据正在变得越来越常见，小到我们每个人的社交网络、消费信息、运动轨迹……大到企业的销售、运营数据，产品的生产数据，交通网络数据…… 如何从海量数据中获得别人看不见的知识，如何利用数据来武装营销工作、优化产品、用户调研、支撑决策，数据分析可以将数据的价值最大化。 所以无论你做产品，运营，HR，财务，还是做研发，系统架构，在数不清的场景下，数据分析都是基本功，它不是一个职位，而是一个技能。 因此，我们才会说，学习数据分析，无论你的职场目标是什么，基本都是必须的，而且不会过时。 但是一提数据分析，很多人就
【axios】XHR的ajax封装+axios拦截器调用+请求取消
qq_40265247的博客
10-15 119
文章目录Http1. 前后台交互的基本过程2. HTTP请求报文3. HTTP响应报文4. post请求体文本参数格式5. 常见响应状态码6. 不同类型的请求及其作用:7. API的分类XHR1. 理解2. 区别一般的HTTP请求与ajax请求3. 使用语法4.XHR的简单封装axios1. axios的特点2. axios常用语法3. 难点语法理解与使用 Http 1. 前后台交互的基本过程 1. 前后应用从浏览器端向服务器发送HTTP请求(请求报文) 2. 后台服务器接收到请求后, 调度服务器应用处理请
使用xhr封装axios
liguangda的博客
11-12 12
<body> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <script> oBtn1 = document.getElementById('btn1'); oBtn2 = document.getElementById('btn2'); function axios({
前端请求封装（基于 axios、ts）
07-15 382
# 封装思路 1. 提供缓存能力，当传参不变时，可选择缓存结果，用 `mem` 实现，`config.cacheable` 控制 2. 异常或错误，统一弹 Notice。提供强制不 Notice 的能力，`config.preventNotice` 控制 3. 扩展 `axios.config` 参数，如上述提到的能力，可通过 config 参数实现控制 4. 统一返回 axios 的 `response.data`，方便日常编码 5. 为适应上述改变，`ts` 声明也需要相应变化
axios 是如何封装 HTTP 请求的
深夜代码酒神
11-28 5万+
概述 前端开发中，经常会遇到发送异步请求的场景。一个功能齐全的 HTTP 请求库可以大大降低我们的开发成本，提高开发效率。 axios 就是这样一个 HTTP 请求库，近年来非常热门。目前，它在 GitHub 上拥有超过 40,000 的 Star，许多权威人士都推荐使用它。 因此，我们有必要了解下 axios 是如何设计，以及如何实现 HTTP 请求库封装的。撰写本文时，axios 当前版本为 ...
对异步请求xhr、ajax、axios、fetch的区别比较
weixin_45424548的博客
03-01 1501
1. XMLHttpRequest对象 在浏览器中，最开始与服务器交换数据的方式则是通过XMLHttpRequest对象。【它可以使用JSON、XML、HTML和Text文本等格式发送和接收数据。】 优点： 1.不重新加载页面的情况下更新网页 2.在页面已加载后从服务器请求/接收数据 3.在后台向服务器发送数据。 缺点： 1.使用起来也比较繁琐，需要设置很多值。 2.早期的IE浏览器有自己的实...
[译]axios 是如何封装 HTTP 请求的
Cool的博客
11-01 290
前端开发中，经常会遇到发送异步请求的场景。一个功能齐全的 HTTP 请求库可以大大降低我们的开发成本，提高开发效率。 axios 就是这样一个 HTTP 请求库，近年来非常热门。目前，它在 GitHub 上拥有超过 40,000 的 Star，许多权威人士都推荐使用它。 因此，我们有必要了解下 axios 是如何设计，以及如何实现 HTTP 请求库封装的。撰写本文时，axios 当前版本为 0...
axios不发起请求_axios 源码系列之如何取消请求
weixin_42515089的博客
01-05 14
在axios中，我们可以根据特定情况来主动取消某个请求，那么这种方式是怎么操作的？实现的原理又是什么呢？我们在前后端交互的过程中，通常是通过请求接口来实现的，而一个页面中的交互又非常复杂，例如需要多次频繁请求同一个接口，或者在接口还没返回时就要切换路由等。这些都需要对接口请求的时机或者请求接口之后进行处理，避免一些无用的请求或者接口返回顺序的差异。防抖：在用户快速地交互过程中，只使用最后...
微信小程序 接口请求封装（axios、Promise）
LiuDanYang的博客
08-11 842
一、axiosutils/request/axios.js /** * Copyright © 2020-present LiuDanYang. All rights Reserved. */ const axios = (function () { class Axios { constructor() { this.defaults = { baseUrl: "", }; this.interceptors = { ...
axios 取消已经发送的请求
qq_40774743的博客
04-03 252
Axios 如何取消已发送的请求？https://www.jianshu.com/p/d5d3bea46c5c 最近遇到一个问题，在连续发送同一请求时，如果第二次请求比第一次请求快，那么实际显示的是第一次请求的数据，这就会造成数据和我选择的内容不一致的问题。解决的方案：在后续发送请求时，判断之前的请求是否完成（同一个接口），如果未完成则立即取消。然后在发送新的请求。 Axios 介绍 A...
ajax封装返回值判断 nuiapp_【研究与总结】关于前端请求的那些事(xhr/ajax/fetch/axios)...
weixin_36269385的博客
01-01 5
引言前端是一个快速发展的领域，而在前端的技术栈当中，前端请求又是最见的一个领域，通过请求接口数据，才能将一个静态的页面动态化。本文将以前端发展的时间轴来逐一分析前端请求的技术演变及其优劣，针对这一课题，作者查阅了相关资料加以自己的理解，如有错误，烦请指出。XMLHttpRequestXMLHttpRequest是最早出现的与服务器交换数据的方案，有了XMLHttpRequest，开发者终于可以在不...
封装一个axios--利用xhr和promise
m0_46205209的博客
09-27 16
基本思路 一：创建一个promise对象，成功的结果为response, 异常的结果为error 二：利用xhr创建一个ajax请求 2.1创建xhr对象 2.2打开连接（初始化请求） 2.3 根据请求方式来决定要不要传请求体参数 2.4监视状态，如果请求成功调用reject()，失败resolve() //2.4.1获取状态 // 2.4.2如果请求成功(status在[200, 299])时执行resolve(response对象) // 2.4.3如果请求失败时执行reject(error对象) i
Vue项目中axios的网络请求的封装实例
zhiy9ong的博客
01-21 1214
1.什么是ajax请求 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行 Aja...
利用promise简单封装axios函数发送Ajax请求
qq_42805569的博客
12-01 193
最近对promise研究比较深入，逐渐也入了迷。 关于promise的作用还不太清楚的小伙伴可以先去看我上两篇文章，都有详细说明。https://blog.csdn.net/qq_42805569/article/details/110410469 写到博客里是想总结一下，一方面是对知识点的巩固，另一方面是想给promise这块有困惑的伙伴提供一些帮助 如有错误，欢迎留言，以便改正。 封装一个Ajax请求，我们先搭建原生Ajax发送请求的结构： const xhr =new XMLHttp.
axios post 传递数组_Axios取消请求总结篇
weixin_39700220的博客
01-05 2
应用场景取消请求在前端有时候会用到，以下是两个工作中可能会用到的场景tab切换时刷新某个列表数据，如果他们共用一个变量存储数据列表，当请求有延时，可能会导致两个tab数据错乱；导出文件或下载文件时，中途取消 。如何取消请求取消http请求，axios文档里提供了两种用法：第一种：使用 CancelTokenconst{CancelToken,isCanCel}=axios;c...
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页