Day28：接口编程，异步编程

cherise9889
98 阅读7分钟

手写web服务

一、基本web服务

1.导入模块

2.创建web服务器

3.监听请求事件

4.设置端口进行监听

二、解决中文乱码问题

res.Header('content-type','text/html;charset=utf-8')

三、根据不同url响应不同数据

const{pathname}=url.paese(req.url,true)

四、获取get请求的参数

const{pathname,query}=url.paese(req.url,true)

五、获取post请求的参数

let postData = ''
req.on('data',data => {postData += data})
req.on('end',() => {
    console.log(postData)

    // 解析获取的参数
    const obj = qs.parse(postData)
    console.log(obj)
    console.log(obj.username)
    console.log(obj.password)
})

1.请求响应的流程

  1. 浏览器发送网址到服务器
  2. 服务器做出的响应
    1. 监听客户端发来的请求
    2. 有请求，触发request，执行对应的事件处理函数
    3. 服务器为这次请求创建一个请求对象和一个响应对象传递到事件处理函数，程序员即可拿到请求对象req和响应对象res进行操作
    4. 请求对象中封装了请求消息（id=1），程序员即可通过请求对象获取用户提交的数据（id=1），进行进一步处理（从数据库中查找响应数据），通过响应对象res，设置到响应消息中，发给浏览器进行展示。
  1. 服务器响应给浏览器

2.接口编程restful

接口概念

其实就是规范，比如电脑上的usb接口，设计好这个usb标准之后，生产电脑和生产外设的厂家，开发好后，直接插上即可使用

接口文档概念

接口说明书，他是我们调用接口，请求后台数据的依据

接口文档中包含了对接口的url、参数及输出内容的说明

参照接口文档即可知道接口作用，以及接口是如何调用的

restful接口设计风格

概念

一种接口设计风格，主要用于有客户端和服务端交互的软件

接口设计的六要素

前端

资源路径：请求的url（http://localhost:3000/login）

HTTP动词：请求方式（post请求）

过滤信息：请求参数（username=zhangsan&password=123）

后台

状态码：200 登陆成功

错误信息：出错的时候给的错误提示或者异常

返回结果：前端想要的数据（登陆成功，返回登录用户的相关信息）

常见的http动词

GET：获取资源（一个或者多个）

获取所有图书列表

获取单个图书信息

POST：新增资源

添加一个图书

PUT：修改资源

修改某个图书信息

DELETE：删除资源

删除某一个图书

Restful接口体验

json-server概念

一个快速成型的restful接口服务工具，使用它可以快速搭建一个restful服务端

弊端：不能进行个性化操作

搭建json-server服务端

安装json-server包（npm i json-server -g）

创建一个data.json作为数据源

启动服务器（json-server -w data.json)

前端请求的书写和发送

使用rest client插件

在VScode的扩展中安装该插件

模拟前端

发送restful风格的请求

查询

GET http://localhost:3000/users HTTP/1.1

### 查询所有
GET http://localhost:3000/users HTTP/1.1

### 查询一个（第一种方式
GET http://localhost:3000/users/1 HTTP/1.1

### 查询一个（第2种方式,拼接字符串形式
GET http://localhost:3000/users?id=1 HTTP/1.1

### 查询多个
GET http://localhost:3000/users?id=1&id=2 HTTP/1.1

### 新增1（模拟表单，type后面必须要空行）
POST http://localhost:3000/users HTTP/1.1
Content-Type:  application/x-www-form-urlencoded

name=张三&age=23

### 新增2（使用json,json必须用双引号）
POST http://localhost:3000/users HTTP/1.1
Content-Type:  application/json

{"name":"赵六","age":"26"}

### 修改1（模拟表单，type后面必须要空行）
PUT  http://localhost:3000/users/1 HTTP/1.1
Content-Type:  application/x-www-form-urlencoded

name=z7&age=27

### 修改2（使用json,json必须用双引号）
PUT http://localhost:3000/users/6 HTTP/1.1
Content-Type:  application/json

{"name":"李四","age":"24"}

### 删除
DELETE  http://localhost:3000/users/7 HTTP/1.1

3.AJAX异步编程

概念

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种用于创建快速动态网页的技术。

AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。

有很多使用 AJAX 的应用程序案例：Google Maps、Gmail、Youtube 和 Facebook。

总结

ajax是一种无需重新加载整个网页的情况下，更新部分网页的技术

同步和异步

同步：同一时间只能做一件事，阻塞式的

异步：同一时间可以做多件事，非阻塞式（多线程）

作用

  1. 实现前后端数据的交换（从前端向后台获取数据）
  2. 可以实现不刷新整个页面的基础上，更新部分网页内容（局部刷新）
  3. 一般作为前后端分离技术中，向后台请求数据的解决方案

应用场景

百度注册（失去焦点的时候，会发送ajax请求，该请求会检查用户是否被注册）

百度搜索框（根据用户的输入，提示不同的信息）

谷歌地图（按需加载，移动多少加载多少）

原生ajax实现

实现方式

使用XMLHTTPRequest对象发送请求

步骤

  1. 创建ajax请求对象（XMLHTTPRequest对象）
  2. 设置请求方式和url
  3. 监听请求的状态，设置回调函数（请求完成之后，回头调用的函数）
  4. 发送请求

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

方法描述
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。- method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步） | | send(string) | 将请求发送到服务器。- string：仅用于 POST 请求 |

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

  • 不愿使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.html",true);

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性描述
onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。- 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪 | | status | 200: "OK" 404: 未找到页面 |

fetch请求数据

概念

fetch是web提供的一个可以获取异步资源的api，目前还没有被所有浏览器支持，它提供的api返回的是promise对象

格式（了解即可）

fetch('http://localhost:3000/users')
  .then(res => {
    // 返回值是一个response对象，需要调用json方法再次获取里面的数据
    console.log(res)
  // 调用json方法之后，发现返回的是一个promise对象，想要的数据在结果属性中
    return res.json()
  })
  .then(data => {
    console.log(data)
  }) // 获取结果属性的值

axios请求数据

概念

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

引入axios

一般格式

发送get请求

axios.get(参数列表).then(回调函数）

axios.post(参数列表).then(回调函数）

axios.put(参数列表).then(回调函数）

axios.delete(参数列表).then(回调函数）

通用格式

axios({
  method:'get', // 请求方式，默认是get
  url：'users', // 请求的url
  params:{一个对象}, //将来与请求一起发送的url参数，只能用于get请求
  data:{ }, // 将来作为请求体发送的数据。只适用于post和put
  timeout：1000,  //  超时时长，请求超时的毫秒数，超过即断连，一般不写
})

修改

<button>修改</button>
<script>
    // 设置基础url
    axios.defaults.baseURL = 'http://localhost:3000/'
    // 监听button（不加button会一直添加王八
    document.querySelector('button').addEventListener('click', function () {
        axios({
            method: 'put', // 请求方式，默认是get
            url: 'users/10', // 请求的url
            data: { name: '拜登', age: 82 },
          // 将来作为请求体发送的数据。只适用于post和put
        })
    })
</script>

异步编程.png

avatar
文章
阅读
粉丝