Vu基础及其开发4

第十一章网络数据交互技术学习目标熟悉网络数据交互的基础知识掌握Ajaxweb网络交互技术的使用掌握Axios网络交互技术的使用掌握Vue-axios在项目中的配置和封装使用通过案例练习能够熟练的在Vue应用中实现网络交互网络数据交互技术是指利用计算机网络进行信息传输和交流的一系列技术和协议。在互联网时代，网络数据交互技术扮演着至关重要的角色。我们浏览网页时，大部分内容都是通过网络从服务器获取的数据，包括新闻、商品信息和其他数据等。除了静态资源外，这些数据通常通过JavaScript脚本使用Ajax或Axios等技术进行网络数据交互并展示。在应用开发中，网络交互是不可或缺的，这也是本章中要介绍Ajax和Axios技术的原因。网络数据交互基础12AJax实现网络交互3Axios和vue-axios的使用4同源策略和跨域网络数据交互基础1．网络数据交互计算机网络是由多台计算机和外部设备通过通信线路连接而成的系统，它们可以位于不同的地理位置并具有独立的功能。在网络操作系统、网络管理软件和网络通信协议的协调下，计算机网络实现了资源共享和信息传递。网络数据交互指的是使用网络通信协议和相应的编程技术，如HTTP、Socket。然后通过计算机网络实现不同设备之间数据传输和交换的过程。在网络数据交互中，通常一个设备作为数据发送方，而另一个设备则作为数据接收方。数据发送方通过将数据封装成指定格式的网络数据包，并通过网络通信协议将数据包发送到接收方。接收方则通过网络协议将数据包接收并解析出数据内容，然后进行相应的数据处理。想要实现网络数据交互，我们需要先了解下网络通信中的三个重要元素IP地址、端口号和网络通信协议。

网络数据交互基础IP地址IP地址是每个设备在网络中的唯一标识。每台网络终端在网络中都有一个独立的地址，用于在互联网中相互识别和数据通信。IP地址分为IPV4地址和IPV6地址两种。IPV4又称互联网通信协议第四版，是IP地址的第一个被广泛部署应用的版本。IPv4地址由32位二进制数组成，被分成四组，每组8位二进制数表示成十进制数，通过"."号分隔开来，例如“”。IPv4地址共有232（大约42亿）个。随着地址不断被分配给最终用户，IPv4地址枯竭问题也在随之产生，在2011年2月3日IPV4地址已经被用尽。IPV6是互联网协议第6版，设计的目的就是用于替代IPv4。IPV6地址长度为128位二进制，为了简洁，它使用8组16进制组成，每组由4个16进制数，例如：“AD80::ABAA:0000:00C2:0002”；IPV6具有更大的地址空间，可以提供更多的IP地址。IP地址又可以分为公网地址和私网地址。公网地址是由互联网管理机构分配的唯一地址，用于在互联网上进行通信。私网地址则是在局域网内使用的地址，不会直接被分配到互联网上，用于在局域网内部进行通信。

网络数据交互基础

课外小知识1网络按照覆盖范围可以分为个人网、局域网（LAN）、城域网（MAN）和广域网（WAN）。局域网是在较小范围内实现计算机和网络设备互联，局域网速度快、稳定性好，特别适合公司、学校、家庭等场合使用。广域网是公网（Internet）的一部分，是由多个局域网、城域网、组成的大范围的计算机网络。

课外小知识2域名（DomainName），又称网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识，如：。由于IP地址具有不方便记忆并且不能显示地址组织的名称和性质等缺点，因此设计出了域名。并通过网域名称系统（DNS，DomainNameSystem）来将域名和IP地址相互映射，使人更方便地访问互联网，而不用去记住能够被机器直接读取的IP地址数串。网络数据交互基础端口号端口号（Port）是用来标识应用程序在计算机中的逻辑地址。每个应用程序会占用一个或多个端口号，当计算机上有多个应用程序需要进行网络通信时，使用端口号就可以识别并连接到相应的应用程序。端口号范围为0~65535，编写网络应用都需要绑定端口号。并且应用的端口号尽量在1024以上，因为0~1023的端口号被预留为系统端口，用于特定的网络协议和服务，例如80端口用于HTTP服务，443端口用于HTTPS服务等。通过端口号，计算机应用程序就可以在网络上进行指定端口的应用进行通信，例如通过TCP协议建立连接，或通过UDP协议进行数据传输。

网络数据交互基础通信协议通信协议是指在计算机网络中，不同计算机和设备之间进行通信所使用的规则和标准。它规定了数据在网络中的传输方式、格式、处理方式、错误处理、流量控制等各个方面的内容，以确保网络中的设备可以互相通信和理解。通信协议可以分为多个层次，每个层次都负责不同的功能。目前比较常用的是基于传统7层协议OSI模型的TCP/IP模型，它分为四个层次：应用层、传输层、网络层和数据链路层，如表所示。

通过通信协议，不同设备之间可以进行数据传输和通信，例如通过HTTP协议进行网页浏览，通过SMTP协议发送电子邮件。在进行网络交互时，需要了解和使用不同的通信协议，以便进行正确的网络通信和数据传输。协议层说明应用层应用层是最顶层的协议，定义了应用程序之间如何传递报文（数据单元）的通信规则。常用的应用层协议包括HTTP（超文本传输协议）、HTTPS（安全的HTTP）、FTP（文件传输协议）、SMTP（邮件协议）等。传输层为应用层实体提供端到端的数据传输功能。常用的传输层协议包括TCP和UDP等。其中，TCP协议提供可靠的数据传输服务，而UDP协议则提供不可靠但是高效的数据传输服务。网络层网络层协议负责将数据包从一个主机传输到另一个主机，常用的网络层协议包括IP协议和ICMP协议等。数据链路层数据链路层协议定义了如何在物理层上（确保物理设备和媒体传输的最底层协议）进行数据传输，常用的数据链路层协议包括以太网协议和WiFi协议等。网络数据交互基础2．HTTP协议介绍HTTP（HyperTextTransferProtocol)超文本传输协议，是互联网上应用最为广泛的一种网络协议，HTTP的端口号是80。HTTP是客户端与服务器之间通信的基础协议之一，常用于万维网（WWW）中。HTTP是一个简单的请求-响应协议，它通常运行在TCP之上。HTTP协议指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。HTTP是一个应用层的面向对象的协议，具有以下几个主要特点：

简单快速：协议设计简单；客户端向服务器请求时，只需要传送请求方法和路径，不需要发送额外过多的数据，所以通信速度也快。灵活：可以通过修改HTTP头部信息实现不同的功能。无状态：HTTP协议中每个请求都是独立的，服务器不会记住之前客户端的请求。可靠性：HTTP协议是基于可靠的TCP协议进行传输，可以保证数据的可靠传输。请求/响应模型：HTTP协议采用请求/响应模型，客户端向服务器发送HTTP请求，服务器返回HTTP响应，从而完成数据的发送和接收。网络数据交互基础HTTP协议由请求和响应两部分组成，当在浏览器中输入网址访问某个网站时，你的浏览器会将你的请求封装成一个HTTP请求发送给服务器站点，服务器接收到请求后通过逻辑处理会组织响应数据封装成一个HTTP响应返回给浏览器，最后在网页中渲染出来。请求HTTP请求由请求行、请求头和请求体三部分组成；当我们在浏览器中请求一个网页的时候，可以通过按F12进入开发者模式，然后在“Network”选项卡中查看抓取到的网络请求信息，点击网络请求信息，可以看到具体的请求详情。如图所示。网络数据交互基础请求行主要包括了请求的方法、请求的资源、协议版本等信息；HTTP请求方法常用的有GET、POST、PUT、DELETE、HEAD、OPTIONS等，如表所示，其中最常见的是GET和POST。请求方法说明GET用于请求指定的资源，请求时如果想要传递参数给服务器，则参数以URL的形式传递给服务器。例如要获取商品的信息，请求地址可能是这样的“http://xxx/goods?id=1001”其中id=1001就是传递给服务器的参数，如果服务器API是RestAPI格式的URL地址就会是这样的“http://xxx/goods/1001”。GET请求通常用于获取资源。POST向服务器提交数据，POST请求的参数通常不会在URL中而是在请求体中。POST请求通常用于提交表单或上传文件等。PUT用于更新指定的资源，通常用于更新数据。DELETE用于删除指定的资源。HEAD与GET方法类似，但是只返回响应头部，不返回响应正文。OPTIONS获取指定资源所支持的通信选项。网络数据交互基础

拓展GET和POST请求虽然都是基于TCP协议传输数据。但是存在一定的区别区别：1.参数传递方式不同：GET请求将参数放在URL的后面；POST请求将参数放在请求体中，参数不会出现在URL中。

2.请求数据大小限制不同：GET请求传输数据的大小受到URL长度的限制，通常不超过2048个字符；POST请求没有大小限制。

3.安全性不同：GET请求的参数会被浏览器缓存和历史记录中，安全性相对较低；POST请求的参数不会被缓存和历史记录中，相对更加安全。

4.数据传输方式不同：GET请求是通过URL传输数据，数据体积较小，一次HTTP请求只需要发送一个TCP数据包即可，因此数据传输速度较快，但是不够安全。POST请求是通过请求体传输数据，请求的数据通常比较大，需要分成多个数据包进行传输，因此可能需要多次发送TCP数据包，数据传输速度较慢，但是更加安全。

5.使用场景不同：GET请求适合获取数据，例如查询、搜索等操作；POST请求适合提交数据，例如登录、注册、上传文件等操作。网络数据交互基础请求头是在HTTP请求中用来传递请求参数和元数据的部分。服务器端就可以通过请求的元数据识别为不同的行为，请求头中的信息使用键值对（key:value）的方式表示。常用的请求头如表所示。请求头说明Host指定要访问的主机名和端口号；User-Agent指定客户端类型和版本信息；Accept指定客户端能够接收的数据类型；Accept-Encoding指定客户端能够接收的压缩格式；Accept-Language指定客户端能够接收的语言；Cookie指定客户端保存的cookie；Content-Type指定请求正文的数据类型；Content-Length指定请求正文的长度；Authorization主要用于授权认证，如JWT验证的token信息就是放在Authorization中。网络数据交互基础请求体就是发送HTTP请求时传递的数据。GET请求是拼接在URL的后面的参数，以?作为参数的分隔符，参数之间用&连接，如“http://localhost:8080...?name=lisi”。如果是POST请求，请求体不会拼接在URL上，而是在PlayLoad中，以键值对的形式传递参数，可以在F12“检查”模式下的PlayLoad（负载）中看到Post请求的数据。网络数据交互基础响应HTTP响应是服务器接收到请求并处理后返回的结果，包含响应行、响应头和响应体三个部分。响应行由HTTP协议版本、状态码和状态信息三个部分组成，例如：HTTP/1.1200OK。其中，HTTP协议版本指定了使用的HTTP版本，响应码是服务器向客户端返回的一个数字，用来表示请求的状态和结果。常见的服务器响应码如表所示。响应码说明1xx以1开头的表示服务器已经接收到了请求，正在处理中；2xx以2开头的表示成功响应，服务器已经成功处理了请求；如200表示请求已经成功处理；201表示服务器已经成功创建了资源；204表示服务器已经成功处理了请求，但不需要返回任何实体内容；3xx以3开头的表示重定向响应，需要客户端采取进一步的操作才能完成请求；如301表示请求的资源已经被永久移动到新的URL地址；302表示请求的资源暂时被移动到新的URL地址；304表示请求的资源未被修改，可以从客户端缓存中获取；4xx以4开头的表示客户端请求出错；如400表示客户端请求出现语法错误；401表示请求需要进行身份验证，但客户端没有提供有效的凭据；403表示服务器拒绝了客户端的请求；404表示请求的资源不存在；5xx已5开头的表示服务器在处理请求时出现了错误。如500表示服务器在处理请求时发生了内部错误。503表示服务器暂时无法处理请求。网络数据交互基础响应头和请求头一样，包含了一系列的HTTP头字段，用于传递关于响应的元数据和参数。常见的响应头如Content-Type、Content-Length、Set-Cookie（设置客户端的cookie）、Cache-Control（设置缓存策略）、Expires（指定缓存过期时间）等。响应体是服务器返回给客户端的数据，返回数据的类型可以是HTML、XML、JSON、文本等任何格式的数据，通常返回类型为JSON格式。如果响应的Content-Type指定的是二进制类型，那么响应正文可以是任何二进制数据。

拓展

HTTPS（HypertextTransferProtocolSecure）是基于HTTP协议的安全通信协议，是HTTP协议的加密版，HTTPS的端口号是443。HTTPS协议在HTTP的基础上，利用SSL（SecureSocketsLayer）或TLS（TransportLayerSecurity）传输层安全加密协议建立全信道，对HTTP数据进行加密，保证了数据在传输过程中的安全性，从而可以在一些安全敏感的通讯领域广泛使用，例如：登录、交易支付等。网络数据交互基础12AJax实现网络交互3Axios和vue-axios的使用4同源策略和跨域AJax实现网络交互1．Ajax介绍Ajax（AsynchronousJavaScriptandXML），是指一种用于创建快速动态网页的技术。Ajax使用JavaScript和XML（可扩展标记语言）来创建异步请求,能够快速地将网页的更新变化呈现在用户界面上，而无需重新加载整个页面，这使得程序能够更快地回应用户的操作。Ajax支持使用同步或异步请求。同步请求会阻塞浏览器，直到请求完成并返回响应才能执行其他代码；这意味着用户无法与页面交互，直到请求完成。异步请求不会阻塞浏览器，而是在后台发送请求时，继续执行页面上的其他代码。当请求完成时，它会触发一个回调函数来处理响应。在此期间户可以与页面交互，而不必等待请求完成。Ajax实现请求的核心是使用XMLHttpRequest对象。通过创建这个对象可以使用同步或异步的方式将请求发送给服务器，并会监听请求处理的状态变化，通过响应成功或失败状态处理数据。AJax实现网络交互AJax实现网络交互2．Ajax的使用JavaScript原生的Ajax其实就是围绕浏览器内置的Ajax引擎对象XMLHttpRequest进行实现的，下面我们通过一个案例来学习下如何在JavaScript中使用Ajax。我们创建一个Ajax.html文件，代码如下所示。

在代码中，先是创建了一个XMLHttpRequest对象。然后，通过该对象的open方法配置请求的一些参数，例如请求方法、请求的URL地址，以及是否异步执行（true表示异步请求）。接着，通过onreadystatechange函数添加对请求状态的监听,并使用send()方法将请求发送给服务器。最后，在请求状态监听中通过状态码确定服务器是否已经响应，并通过响应数据更新视图。当readyState为4并且status为200时，表示请求成功。AJax实现网络交互关于readyState和status的其他状态，如表所示。使用Ajax完成Get请求传参时，只需将参数拼接在URL地址后即可。但如果使用POST请求传参，需要在send()方法中拼接参数。此外，也可以使用setRequestHeader函数设置请求头信息。说明readyState表示XMLHttpRequest请求的状态。从0到4发生变化。0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪status服务器响应码，200表示成功。网络数据交互基础12AJax实现网络交互3Axios和vue-axios的使用4同源策略和跨域Axios和vue-axios的使用Ajax是JavaScript提供的异步请求技术，但是它使用起来存在复用性差、功能单一、只能在浏览器上运行等局限性。因此开发者通常会选择一些简单易用并且功能强大的请求库，其中Axios就是最流行的ajax请求库之一。1．Axios介绍和快速入门Axios是一个基于Promise的HTTP库，它提供了一个简单易用的API，可以发送HTTP请求，处理响应和管理请求。Axios支持从浏览器发起XMLHttpRequest或在Node环境发送http请求，支持使用PromiseAPI，还支持请求和响应的拦截、请求和响应数据的转换、取消请求、JSON数据的自动转换以及对XSRF（跨站请求伪造）进行保护等功能。想要使用使用Axios首先需要安装它，Axios支持npm(或yarn)、bower、CDN三种安装方式。这里我们先使用CDN的方式快速体验下Axios的基本使用。首先，创建一个Axios.html文件。然后，通过CDN地址导入Axios并使用Axios实现网络请求。Axios和vue-axios的使用在上述代码中，通过使用axios.get()函数发起一个get请求，因为是基于Promise的，所以在then()中可以获取到响应成功的结果，在catch()中表示响应失败，并且会自动将返回的结果转换为JSON对象。可以看到Axios使用起来比Ajax要简单了很多，它实现了对于请求对象的封装使用。Axios和vue-axios的使用2．vue-axios的使用Axios对流行框架Vue、React、nuxtjs都提供了Axios的包装器，其中vue-axios就是Axios对Vue框架提供的包装器插件，可以通过安装插件的方式在Vue中使用vue-axios。首先，创建一个“vue-axios”的Vue项目，然后使用npm/yarn命令安装vue-axios依赖，如下所示：或安装成功后，可以在package.json中看到axios和vue-axios都已添加到dependencies中，如图所示。npminstall--saveaxiosvue-axiosyarnaddaxiosvue-axiosAxios和vue-axios的使用然后,在main.js中安装VueAxios插件，如下所示。因为vue-axios将axios绑定到了Vue实例上，所以在项目中的任何组件中都可以使用this.$http或this.axios来使用axios。下面创建一个Axios.vue并添加到App.vue中。Axios和vue-axios的使用温馨提示因为setup函数中不能使用this，所以在setup函数或<scriptsetup>中不能够使用this.$http或this.axios，开发中推荐把API请求函数进行封装起来然后在setup中调用。Axios和vue-axios的使用3．AxiosAPIAxios对http的所有请求方法都提供了函数的支持，除此之外还提供了request函数可以通过配置实现网络请求，如表所示。在上述API的参数中，[]表示参数是可选的，参数url表示服务器的API地址；data表示传递的参数；config为请求时的配置对象。APIaxios.request(config)axios.get(url[,config])axios.delete(url[,config])axios.head(url[,config])axios.options(url[,config])axios.post(url[,data[,config]])axios.put(url[,data[,config]])axios.patch(url[,data[,config]])Axios和vue-axios的使用config对象常用的配置项如表所示。配置选项说明url服务器接口地址method请求方法，默认给GET请求，常用值为GET和POST；baseURLurl地址前缀，设置了baseURL则请求的地址为baseURL+url的拼接结果。headers值为一个对象,用来设置请求头信息。params值为一个对象，GET请求的参数也可以放到params对象中，params对象的属性在发送请求的时候会以“?Key=value”的形式拼接在url的后面。data值为一个对象，表示POST请求传递的参数。timeout请求超时时间，单位为毫秒值。withCredentials值为布尔类型，表示是否是跨域访问。responseType服务器返回数据的类型，选项为“arraybuffer”、“blob”、“document”、“json”、“text”、“stream”responseEncoding响应数据的编码格式，默认为“utf8”onUploadProgress当请求未上传文件时，可以实时获取上传的进度onDownloadProgress当请求未下载类型时，可以获取下载的进度。Axios和vue-axios的使用也可以通过向axios对象传递config配置对象来创建网络请求，如下所示。对上述代码中，response封装了网络请求响应属性，响应属性主要有返回数据data、响应码status以及响应头headers等。Axios和vue-axios的使用4．Axios默认配置Axios可以为每一个请求指定默认的配置项，这样可以让开发者使用Axios的时候更加方便简单。Axios支持全局默认配置和自定义默认配置两种；全局配置主要是以“axios.defaults.xxx”的方式配置。Axios允许通过Axios.create()方法创建自定义实例来定制请求配置。create()方法会返回一个新的Axios实例，使用这个实例可以实现默认配置，这些默认配置也将应用于Axios实例的所有请求。Axios和vue-axios的使用即使是设置了默认的配置，在组件中使用Axios的时候也可以在config配置对象中被覆盖掉。Axios在加载配置的时候也会根据配置的优先级高低进行加载，优先级从高到低分别为“请求参数配置”>“Axios实例配置”>“Axioslib/defaults.js默认库配置”。Axios和vue-axios的使用5．拦截器的使用Axios拦截器是一种在发送请求或响应之前或之后拦截它们的机制。它可以用于执行一些额外的逻辑，例如添加请求头、认证和授权、重试请求失败、处理数据等。这些应用场景都可以使用拦截器来实现。Axios使用erceptors.request.use和erceptors.response.use分别添加请求和响应拦截器。下面以认证和授权为例，如下所示。Axios和vue-axios的使用上述代码中，我们使用了localStorage.setItem('token')的方式模拟了登录返回的token凭证存储，也可以存储在store中。运行添加拦截器后的代码，在浏览器开发者模式下可以看到请求携带了token信息，如图所示。Axios除了上述的一些常用功能外，还可以通过axios.CancelToken取消请求，在请求的catch方法中处理错误等操作。网络数据交互基础12AJax实现网络交互3Axios和vue-axios的使用4同源策略和跨域同源策略和跨域同源策略（Same-OriginPolicy）是一种Web安全机制，用于防止来自不同源的脚本或代码访问特定网页上的数据。同源指的是协议、域名和端口号均相同，只要有一项不相同就是不同源，不同源的页面数据访问就是跨域访问。同源策略的实现基于浏览器的安全限制，浏览器通过检查访问的数据和脚本是否来自相同的源来决定是否允许访问。如果来自不同源的脚本试图访问特定网页的数据，浏览器将阻止该操作，并抛出一个错误。比如，我们把之前案例中的服务器URL修改为一个获取天气的API，如下所示。此时在浏览器中打开网页，然后通过F12进入开发者模式下查看日志可以看到有跨域访问的错误，如图所示。同源策略和跨域同源策略的作用是保护Web应用程序的安全性，防止恶意脚本通过跨域攻击窃取敏感数据或执行恶意操作。但是，有时候需要通过特定的方式来绕过同源策略实现跨域访问。例如前后端分离开发的模式下，前端和服务器通常都是分开部署的，这样一来两者的端口号或IP就会有所不同，前端访问服务器就变成了跨域访问。跨域使得前端无法直接访问到服务器API的数据，这时候就需要想办法实现跨域访问。实现跨域访问的方式有多种，最常见的就是使用JSONP、CORS资源共享和使用代理的方式实现了。JSONP是利用<script>标签的src属性不受同源策略限制的特