JavaScript高级 XHR - Fetch

news2024/11/20 18:44:35

1. 前端数据请求方式

早期的网页都是通过后端渲染来完成的：服务器端渲染（SSR，server side render）

在这里插入图片描述

客户端发出请求 -> 服务端接收请求并返回相应HTML文档 -> 页面刷新，客户端加载新的HTML文档

当用户点击页面中的某个按钮向服务器发送请求时，页面本质上只是一些数据发生了变化，而此时服务器却要将重绘的整个页面再返
回给浏览器加载，而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档，这本身也会给网络带宽带来不必要的开销

AJAX(异步的JavaScript和XML)是一种实现 无页面刷新 获取服务器数据的技术，AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面，通过他开始前后端分离的开发模式

在这里插入图片描述

2. Http协议的解析

1. HTTP 协议的作用

超文本传输协议（英语：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议，设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法，通过HTTP或者HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识

通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定端口（默认端口为80），我们称这个客户端为用户代理程序（user agent），响应的服务器上存储着一些资源，比如HTML文件和图像，我们称这个响应服务器为源服务器（origin server）

在这里插入图片描述
一次HTTP请求主要包括：请求（Request）和响应（Response）

在这里插入图片描述

2. 请求方式

GET：GET 方法请求一个指定资源的表示形式，使用 GET 的请求应该只被用于获取数据。

HEAD：HEAD 方法请求一个与 GET 请求的响应相同的响应，但没有响应体。比如在准备下载一个文件前，先获取文件的大小，再决定是否进行下载；

POST：POST 方法用于将实体提交到指定的资源。

PUT：PUT 方法用请求有效载荷（payload）替换目标资源的所有当前表示；

DELETE：DELETE 方法删除指定的资源；

PATCH：PATCH 方法用于对资源应部分修改；

CONNECT：CONNECT 方法建立一个到目标资源标识的服务器的隧道，通常用在代理服务器，网页开发很少用到。

TRACE：TRACE 方法沿着到目标资源的路径执行一个消息环回测试。

3 . HTTP Request Header

在request对象的header中也包含很多有用的信息，客户端会默认传递过来一些信息

在这里插入图片描述

content-type 请求携带的数据的类型

application/x-www-form-urlencoded：表示数据被编码成以 ‘&’ 分隔的键 - 值对，同时以 ‘=’ 分隔键和值

application/json：表示是一个json类型

text/plain：表示是文本类型

application/xml：表示是xml类型

multipart/form-data：表示是上传文件

content-length 文件的大小长度

keep-alive

 http是基于TCP协议的，但是通常在进行一次请求和响应结束后会立刻中断
 在http1.0中，如果想要继续保持连接，浏览器需要在请求头中添加 connection: keep-alive，服务器需要在响应头中添加 connection:keep-alive，当客户端再次放请求时，就会使用同一个连接，直接一方中断连接
 在http1.1中，所有连接默认是 connection: keep-alive的
 不同的Web服务器会有不同的保持 keep-alive的时间,Node中默认是5s中

accept-encoding：告知服务器，客户端支持的文件压缩格式，比如js文件可以使用gzip编码，对应 .gz文件；

accept：告知服务器，客户端可接受文件的格式类型；

user-agent：客户端相关的信息；

HTTP Response响应状态码

常见HTTP状态码状态描述信息说明
200OK客户端请求成功
201CreatedPOST请求，创建新的资源
301MovedPermanently 请求资源的URL已经修改，响应中会给出新的URL
400BadRequest 客户端的错误，服务器无法或者不进行处理
401Unauthorized未授权的错误，必须携带请求的身份信息
403Forbidden客户端没有权限访问，被拒接
404Not Found服务器找不到请求的资源。
500Internal Server Error服务器遇到了不知道如何处理的情况。
503Service Unavailable服务器不可用，可能处理维护或者重载状态，暂时无法访问

4. HTTP Response Header

响应的header中包括一些服务器给客户端的信息

在这里插入图片描述

3. XHR的基本用法

AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML），它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据

1. AJAX请求步骤

第一步：创建网络请求的AJAX对象（使用XMLHttpRequest）

第二步：监听XMLHttpRequest对象状态的变化，或者监听onload事件（请求完成时触发）；

第三步：配置网络请求（通过open方法）；

第四步：发送send网络请求；

// 1.创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()

// 2.监听状态的改变(宏任务)
xhr.onreadystatechange = function () {
    // console.log(xhr.response)
    if (xhr.readyState !== XMLHttpRequest.DONE) return
      console.log(xhr.response)
}

// 3.配置请求open
// method: 请求的方式(get/post/delete/put/patch...)
// url: 请求的地址
xhr.open("get", "http://123.207.32.32:8000/home/multidata")

// 4.发送请求(浏览器帮助发送对应请求)
xhr.send()

默认异步发送请求，同步发送请求需要设置第三个参数 false

const xhr = new XMLHttpRequest()
// async: false
// 实际开发中要使用异步请求, 异步请求不会阻塞js代码继续执行
xhr.open("get", "http://123.207.32.32:8000/home/multidata", false)

// 发送请求(浏览器帮助发送对应请求)
xhr.send()

// 同步必须等到有结果后, 才会继续执行
console.log(xhr.response)

2. XMLHttpRequest的state

值状态描述
0UNSENT代理被创建，但尚未调用 open() 方法。
1OPENEDopen() 方法已经被调用。
2HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。
3LOADING下载中；responseText 属性已经包含部分数据。
4DONE下载操作已完成。

这个状态并非是HTTP的相应状态，而是记录的XMLHttpRequest对象的状态变化，http响应状态应通过status获取

xhr.onload = function() {
  console.log(xhr.status, xhr.statusText)
  // 根据http的状态码判断是否请求成功
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.response)
  } else {
    console.log(xhr.status, xhr.statusText)
  }
}

3. 事件监听

除了onreadystatechange还有其他的事件可以监听

loadstart：请求开始。

progress： 一个响应数据包到达，此时整个 response body 都在 response 中。

abort：调用 xhr.abort() 取消了请求。

error：发生连接错误，例如，域错误。不会发生诸如 404 这类的 HTTP 错误。

load：请求成功完成。

timeout：由于请求超时而取消了该请求（仅发生在设置了 timeout 的情况下）。

loadend：在 load，error，timeout 或 abort 之后触发。

const xhr = new XMLHttpRequest()
// onload监听数据加载完成
xhr.onload = function() {
  console.log("onload")
}
xhr.open("get", "http://123.207.32.32:8000/home/multidata")
xhr.send()

4. 响应数据和响应类型

XMLHttpRequest response 属性返回响应的正文内容，返回的类型取决于responseType的属性设置

// 1.创建对象
const xhr = new XMLHttpRequest()

// 2.监听结果


// 3.设置响应类型
xhr.responseType = "json"

// 4.配置网络请求
// xhr.open("get", "http://123.207.32.32:8000/abc/cba/aaa")
xhr.open("get", "http://123.207.32.32:8000/home/multidata")

// 5.发送网络请求
xhr.send()

XMLHttpRequest的state是用于记录xhr对象本身的状态变化，并非针对于HTTP的网络请求状态，如果我们希望获取HTTP响应的网络状态，可以通过status和statusText来获取

常见HTTP状态码状态描述信息说明
200OK客户端请求成功
201CreatedPOST请求，创建新的资源
301MovedPermanently 请求资源的URL已经修改，响应中会给出新的URL
400BadRequest 客户端的错误，服务器无法或者不进行处理
401Unauthorized未授权的错误，必须携带请求的身份信息
403Forbidden客户端没有权限访问，被拒接
404Not Found服务器找不到请求的资源。
500Internal Server Error服务器遇到了不知道如何处理的情况。
503Service Unavailable服务器不可用，可能处理维护或者重载状态，暂时无法访问
const xhr = new XMLHttpRequest()

// 2.onload监听数据加载完成
xhr.onload = function() {
  console.log(xhr.status, xhr.statusText)
  // 根据http的状态码判断是否请求成功
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.response)
  } else {
    console.log(xhr.status, xhr.statusText)
  }
}

xhr.onerror = function() {
  console.log("onerror", xhr.status, xhr.statusText)
}

// 3.告知xhr获取到的数据的类型
xhr.responseType = "json"
// xhr.responseType = "xml"

// 4.配置网络请求
// 4.1.json类型的接口
xhr.open("get", "http://123.207.32.32:8000/home/multidata")
// 4.2.json类型的接口
// xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_json")
// 4.3.text类型的接口
// xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_text")
// 4.4.xml类型的接口
// xhr.open("get", "http://123.207.32.32:1888/01_basic/hello_xml")

// 5.发送网络请求
xhr.send()

5. GET/POST请求传递参数

在开发中，我们使用最多的是GET和POST请求，在发送请求的过程中，我们也可以传递给服务器数据。

常见的传递给服务器数据的方式有如下几种

 方式一：GET请求的query参数
 方式二：POST请求 x-www-form-urlencoded 格式
 方式三：POST请求 FormData 格式
 方式四：POST请求 JSON 格式

const xhr = new XMLHttpRequest()

// 监听数据响应
xhr.onload = function() {
  console.log(xhr.response)
}

// 配置请求
xhr.responseType = "json"

// 1.传递参数方式一: get -> query
// xhr.open("get", "http://123.207.32.32:1888/02_param/get?name=why&age=18&address=广州市")

// 2.传递参数方式二: post -> urlencoded
// xhr.open("post", "http://123.207.32.32:1888/02_param/posturl")
// // 发送请求(请求体body)
// xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
// xhr.send("name=why&age=18&address=广州市")

// 3.传递参数方式三: post -> formdata
// xhr.open("post", "http://123.207.32.32:1888/02_param/postform")
// // formElement对象转成FormData对象
// const formData = new FormData(formEl)
// xhr.send(formData)

// 4.传递参数方式四: post -> json
xhr.open("post", "http://123.207.32.32:1888/02_param/postjson")
xhr.setRequestHeader("Content-type", "application/json")
xhr.send(JSON.stringify({name: "why", age: 18, height: 1.88}))

4. XHR的进阶和封装

1. XHR封装方式一

function xajax({
                    url,
                    method = "get",
                    data = {},
                    headers = {}, // token
                    success,
                    failure
                } = {}) {
    // 1.创建对象
    const xhr = new XMLHttpRequest()

    // 2.监听数据
    xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
            success && success(xhr.response)
        } else {
            failure && failure({status: xhr.status, message: xhr.statusText})
        }
    }

    // 3.设置类型
    xhr.responseType = "json"

    // 4.open方法
    if (method.toUpperCase() === "GET") {
        const queryStrings = []
        for (const key in data) {
            queryStrings.push(`${key}=${data[key]}`)
        }
        url = url + "?" + queryStrings.join("&")
        xhr.open(method, url)
        xhr.send()
    } else {
        xhr.open(method, url)
        xhr.setRequestHeader("Content-type", "application/json")
        xhr.send(JSON.stringify(data))
    }

    return xhr
}

// 调用者
xajax({
    url: "http://123.207.32.32:1888/02_param/get",
    method: "GET",
    data: {
        name: "why",
        age: 18
    },
    success: function (res) {
        console.log("res:", res)
    },
    failure: function (err) {
        // alert(err.message)
    }
})

2. XHR封装方式二

function xajax({
  url,
  method = "get",
  data = {},
  timeout = 10000,
  headers = {}, // token
} = {}) {
  // 1.创建对象
  const xhr = new XMLHttpRequest()

  // 2.创建Promise
  const promise = new Promise((resolve, reject) => {

    // 2.监听数据
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response)
      } else {
        reject({ status: xhr.status, message: xhr.statusText })
      }
    }

    // 3.设置类型
    xhr.responseType = "json"
    xhr.timeout = timeout

    // 4.open方法
    if (method.toUpperCase() === "GET") {
      const queryStrings = []
      for (const key in data) {
        queryStrings.push(`${key}=${data[key]}`)
      }
      url = url + "?" + queryStrings.join("&")
      xhr.open(method, url)
      xhr.send()
    } else {
      xhr.open(method, url)
      xhr.setRequestHeader("Content-type", "application/json")
      xhr.send(JSON.stringify(data))
    }
  })

  promise.xhr = xhr

  return promise
}

const promise = xajax({
  url: "http://123.207.32.32:1888/02_param/get",
  data: {
    username: "coderwhy",
    password: "123456"
  }
})

promise.then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err)
})

3. 超时时间的设置

在网络请求的过程中，为了避免过长的时间服务器无法返回数据，通常我们会为请求设置一个超时时间：timeout，当达到超时时间后依然没有获取到数据，那么这个请求会自动被取消掉，默认值为0，表示没有设置超时时间

我们也可以通过abort方法强制取消请求

const xhr = new XMLHttpRequest()

xhr.onload = function() {
  console.log(xhr.response)
}
xhr.onabort = function() {
  console.log("请求被取消掉了")
}

xhr.responseType = "json"

// 1.超时时间的设置
xhr.ontimeout = function() {
  console.log("请求过期: timeout")
}
// timeout: 浏览器达到过期时间还没有获取到对应的结果时, 取消本次请求
 xhr.timeout = 3000
xhr.open("get", "http://123.207.32.32:1888/01_basic/timeout")

xhr.send()

5. Fetch的使用详解

Fetch可以看做是早期的XMLHttpRequest的替代方案，它提供了一种更加现代的处理方案：

比如返回值是一个Promise，提供了一种更加优雅的处理结果方式，在请求发送成功时，调用resolve回调then； ✓ 在请求发送失败时，调用reject回调catch，比如不像XMLHttpRequest一样，所有的操作都在一个对象上

Fetch函数的参数

  • input：定义要获取的资源地址，可以是一个URL字符串，也可以使用一个Request对象（实验性特性）类型；
  • init：其他初始化参数
    • method: 请求使用的方法，如 GET、POST
    • headers: 请求的头信息
    • body: 请求的 body 信息

Fetch数据的响应

  • 阶段一：当服务器返回了响应
    • fetch 返回的 promise 就使用内建的 Response class 对象来对响应头进行解析
    • 在这个阶段，我们可以通过检查响应头，来检查 HTTP 状态以确定请求是否成功
    • 如果 fetch 无法建立一个 HTTP 请求，例如网络问题，亦或是请求的网址不存在，那么 promise 就会 reject
    • 异常的 HTTP 状态，例如 404 或 500，不会导致出现 error
  • 第二阶段，为了获取 response body，我们需要使用一个其他的方法调用
    • response.text() —— 读取 response，并以文本形式返回 response
    • response.json() —— 将 response 解析为 JSON
 fetch("http://123.207.32.32:8000/home/multidata").then(response => {
     response.json().then(res => {
         console.log("res:", res)
     })
 }).catch(err => {
     console.log("err:", err)
 })

代码优化

async function getData() {
    const formData = new FormData()
    formData.append("name", "why")
    formData.append("age", 18)
    const response = await fetch("http://123.207.32.32:1888/02_param/postform", {
        method: "post",
        body: formData
    })

    // 获取response状态
    console.log(response.ok, response.status, response.statusText)

    const res = await response.json()
    console.log("res:", res)
}

getData()

6. 前端文件上传流程

1. XHR

<body>
  <input class="file" type="file">
  <button class="upload">上传文件</button>
  <script>
    // xhr/fetch
    const uploadBtn = document.querySelector(".upload")
    uploadBtn.onclick = function() {
      // 1.创建对象
      const xhr = new XMLHttpRequest()
      // 2.监听结果
      xhr.onload = function() {
        console.log(xhr.response)
      }
      xhr.onprogress = function(event) {
        console.log(event)
      }
      xhr.responseType = "json"
      xhr.open("post", "http://123.207.32.32:1888/02_param/upload")
      // 表单
      const fileEl = document.querySelector(".file")
      const file = fileEl.files[0]
      const formData = new FormData()
      formData.append("avatar", file)
      xhr.send(formData)
    }
  </script>

</body>

2. Fetch

<body>
  <input class="file" type="file">
  <button class="upload">上传文件</button>
  <script>  
    const uploadBtn = document.querySelector(".upload")
    uploadBtn.onclick = async function() {
      // 表单
      const fileEl = document.querySelector(".file")
      const file = fileEl.files[0]
      const formData = new FormData()
      formData.append("avatar", file)
      // 发送fetch请求
      const response = await fetch("http://123.207.32.32:1888/02_param/upload", {
        method: "post",
        body: formData
      })
      const res = await response.json()
      console.log("res:", res)
    }
  </script>
</body>

Fetch也支持文件上传，但是Fetch没办法监听进度

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/387993.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++:哈希：闭散列哈希表

C++:哈希：闭散列哈希表

哈希的概念 哈希表就是通过哈希映射&#xff0c;让key值与存储位置建立关联。比如&#xff0c;一堆整型{3,5,7,8,2,4}在哈希表的存储位置如图所示&#xff1a; 插入数据的操作&#xff1a; 在插入数据的时候&#xff0c;计算数据相应的位置并进行插入。 查找数据的操作&…
阅读更多...
从企业数字化发展的四个阶段，看数字化创新战略

从企业数字化发展的四个阶段，看数字化创新战略

《Edge: Value-Driven Digital Transformation》一书根据信息技术与企业业务发展的关系把企业的数字化分为了四个阶段&#xff1a; 技术与业务无关技术作为服务提供者开始合作科技引领差异化优势以技术为业务核心 下图展示了这四个阶段的特点&#xff1a; 通过了解和分析各个…
阅读更多...
[ant-design-vue] tree 组件功能使用

[ant-design-vue] tree 组件功能使用

[ant-design-vue] tree 组件功能使用描述环境信息相关代码参数说明描述 是希望展现一个树形的菜单&#xff0c;并且对应的菜单前有复选框功能&#xff0c;但是对比官网的例子&#xff0c;我们在使用的过程中涉及到对半选中情况的处理&#xff1a; 半选中状态&#xff1a; 选中…
阅读更多...
NodeJS安装

NodeJS安装

一、简介Node.js是一个让JavaScript运行在服务端的开发平台&#xff0c;Node.js不是一种独立的语言&#xff0c;简单的说 Node.js 就是运行在服务端的 JavaScript。npm其实是Node.js的包管理工具&#xff08;package manager&#xff09;&#xff0c;类似与 maven。二、安装步骤…
阅读更多...
并发下的可见性、原子性、有序性还不懂？

并发下的可见性、原子性、有序性还不懂？

CPU、内存、I/O速度大比拼CPU的读写速度是内存的100倍左右&#xff0c;而内存的读写速度又是I/O的10倍左右。根据"木桶理论"&#xff0c;速度取决于最慢的I/O。为了解决速度不匹配的问题&#xff0c;通常在CPU和主内存间增加了缓存&#xff0c;内存和I/O之间增加了操…
阅读更多...
C语言学习之路--操作符篇，从知识到实战

C语言学习之路--操作符篇，从知识到实战

目录一、前言二、操作符分类三、算术操作符四、移位操作符1、左移操作符2、右移操作符五、位操作符拓展1、不能创建临时变量&#xff08;第三个变量&#xff09;&#xff0c;实现两个数的交换。2、编写代码实现&#xff1a;求一个整数存储在内存中的二进制中1的个数。六、赋值操…
阅读更多...
http客户端Feign

http客户端Feign

Feign替代RestTemplate RestTemplate方式调用存在的缺陷 String url"http://userservice/user/"order.getUserId();User user restTemplate.getForObject(url, User.class); 代码可读性差&#xff0c;变成体验不统一&#xff1b; 参数复杂的时候URL难以维护。 &l…
阅读更多...
Gem5模拟器，一些运行的小tips（十一）

Gem5模拟器，一些运行的小tips（十一）

一些基础知识&#xff0c;下面提到的东西与前面的文章有一定的关系&#xff0c;感兴趣的小伙伴可以看一下&#xff1a; (21条消息) Gem5模拟器&#xff0c;全流程运行Chiplet-Gem5-SharedMemory-main&#xff08;十&#xff09;_好啊啊啊啊的博客-CSDN博客 Gem5模拟器&#xf…
阅读更多...
深度学习|改进两阶段鲁棒优化算法i-ccg

深度学习|改进两阶段鲁棒优化算法i-ccg

目录 1 主要内容 2 改进算法 2.1 CC&G算法的优势 2.2 i-CCG算法简介 3 结果对比 1 主要内容 自从2013年的求解两阶段鲁棒优化模型的列和约束生成算法&#xff08;CC&G&#xff09;被提出之后&#xff0c;基本没有实质性的创新&#xff0c;都是围绕该算法在各个领…
阅读更多...
静态路由复习实验

静态路由复习实验

实验分析&#xff1a; 1 .R6为isp,接口IP地址均为公有有地址&#xff1b;该设备只能配置IP地址, 之后不能再对其进行任何配置; r6只能配置IP&#xff0c; 所以r1--r5上需要配置指向r6的缺省路由&#xff1b; 2 .R1—R5为局域网,私有P地址192.168.1.6/24,请合理分配; 图中骨干…
阅读更多...
来说说winform和wpf异同，WPF对于新人上手容易吗？

来说说winform和wpf异同，WPF对于新人上手容易吗？

这么问&#xff0c;可能还真不是很好回答&#xff0c;但WPF的特点决定了&#xff0c;他对于前端人员更容易上手。 首先&#xff0c;我们假定你已经安装了Visual studio 2017以上的版本&#xff08;如果你的VS打开没有WPF那就说明你没有安装.net桌面开发这项&#xff09;&#x…
阅读更多...
【2023unity游戏制作-mango的冒险】-前六章API，细节，BUG总结小结

【2023unity游戏制作-mango的冒险】-前六章API，细节，BUG总结小结

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 收录于专栏&#xff1a;unity游戏制作 ⭐mango的冒险前六章总结⭐ 文章目录⭐mango的冒险前六章总结⭐&#x1f468;‍&a…
阅读更多...
Eureka - 总览

Eureka - 总览

文章目录前言架构注册中心 Eureka Server服务提供者 Eureka Client服务消费者 Eureka Client总结资源前言 微服务&#xff08;Microservices&#xff0c;一种软件架构风格&#xff09;核心的组件包括注册中心&#xff0c;随着微服务的发展&#xff0c;出现了很多注册中心的解决…
阅读更多...
【项目精选】 塞北村镇旅游网站设计（视频+论文+源码）

【项目精选】 塞北村镇旅游网站设计（视频+论文+源码）

点击下载源码 摘要 城市旅游产业的日新月异影响着村镇旅游产业的发展变化。网络、电子科技的迅猛前进同样牵动着旅游产业的快速成长。随着人们消费理念的不断发展变化&#xff0c;越来越多的人开始注意精神文明的追求&#xff0c;而不仅仅只是在意物质消费的提高。塞北村镇旅游…
阅读更多...
Android事件分发机制

Android事件分发机制

文章目录Android View事件分发机制&#xff1a;事件分发中的核心方法onTouchListener和onClickListener的优先级事件分发DOWN,MOVE,UP 事件分发CANCEL代码实践requestdisallowIntereptTouchEvent作用Android View事件分发机制&#xff1a; 事件分发中的核心方法 Android中事件…
阅读更多...
一文让你彻底理解Linux内核多线程(互斥锁、条件变量、读写锁、自旋锁、信号量)

一文让你彻底理解Linux内核多线程(互斥锁、条件变量、读写锁、自旋锁、信号量)

一、互斥锁&#xff08;同步&#xff09; 在多任务操作系统中&#xff0c;同时运行的多个任务可能都需要使用同一种资源。这个过程有点类似于&#xff0c;公司部门里&#xff0c;我在使用着打印机打印东西的同时&#xff08;还没有打印完&#xff09;&#xff0c;别人刚好也在…
阅读更多...
【Tcp和Udp】

【Tcp和Udp】

udp和tcpTcpTcp协议的断开与连接Tcp的状态转移复位报文段交互数据流与成块数据流流式服务特点应答确认与超时重传滑动窗口拥塞控制Udp协议特点Tcp Tcp协议的断开与连接 Tcp协议提供的是&#xff1a;面向连接&#xff0c;可靠的&#xff0c;字节流服务。 使用Tcp协议通信的双方…
阅读更多...
java封装继承多态详解

java封装继承多态详解

1.封装 所谓封装&#xff0c;就是将客观事物封装成抽象的类&#xff0c;并且类可以把数据和方法让可信的类或者对象进行操作&#xff0c;对不可信的类或者对象进行隐藏。类就是封装数据和操作这些数据代码的逻辑实体。在一个类的内部&#xff0c;某些属性和方法是私有的&#…
阅读更多...
自学大数据第三天~终于轮到hadoop了

自学大数据第三天~终于轮到hadoop了

前面那几天是在找大数据的门,其实也是在搞一些linux的基本命令,现在终于轮到hadoop了 Hadoop hadoop的安装方式 单机模式: 就如字面意思,在一台机器上运行,存储是采用本地文件系统,没有采用分布式文件系统~就如我们一开始入门的时候都是从本地开始的; 伪分布式模式 存储采用…
阅读更多...
openpnp - 判断吸嘴是否指定了正确的旋转轴

openpnp - 判断吸嘴是否指定了正确的旋转轴

文章目录openpnp - 判断吸嘴座是否指定了正确的旋转轴概述笔记吸嘴单独矫正的时候Calibrate precise camera ↔ nozzle N1 offsets.ENDopenpnp - 判断吸嘴座是否指定了正确的旋转轴 概述 如果没有指定吸嘴座的正确旋转轴, 会因为对应吸嘴该旋转时不旋转, 而是另外一个空闲的吸…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023