JS基础 网络请求

Posted 2022-02-24 wgchen~

阅读目录

• 基础知识
• XMLHttpRequest
• • 基本使用
  • 响应类型
  • 响应结果
  • 使用示例
  • 发送表单
  • 封装请求类
• FETCH
• • 请示步骤
  • • 响应头解析
    • 响应内容解析
  • 实例操作
  • • 发送请求 get
    • 发送请求 post

基础知识

浏览器天生具有发送HTTP请求的能力，比如在址栏输入内容，提交 FORM 表单等。
本章来学习通过JS程序来管理HTTP请求的能力。

使用JS脚本发送HTTP请求，不会带来页面的刷新，所以用户体验非常好。

XMLHttpRequest

使用XMLHttpRequest发送请求，是一种存在很久的方案。
现代浏览器支持使用 fetch 的异步请求方式，fetch 基于 promise 异步操作体验更好。

基本使用

使用XMLHttpRequest 发送请求需要执行以下几步

• 使用 new XMLHttpRequest 创建 xhr 对象
• xhr.open 初始化请求参数
• xhr.send 发送网络请求
• xhr.onload 监听请求结果
• xhr.onerror 请求中断等错误发生时的处理

响应类型

通过设置 xhr.responseType 对响应结果进行声明，来对结果自动进行处理。

下面是可以使用的响应类型

类型	说明
text	响应结果为文本
json	响应内容为JSON，系统会自动将结果转为JSON对象
blob	二进制数据响应
document	XML DOCUMENT 内容

响应结果

xhr.onload 用于处理响应完毕后的处理

使用以下属性来处理结果

1、xhr.status 为HTTP状态码 如 404/422/403等，当为200时为正确响应
2、xhr.statusText HTTP状态码内容，200时为ok,404 为Not Found
3、xhr.response 服务器端响应的内容

使用示例

<script>
const xhr = new XMLHttpRequest()
xhr.timeout = 5000
xhr.open('GET', 'http://tt.cc/testData/user.php')
xhr.send()
xhr.onload = function () 
    if (xhr.status == 200) 
        console.log(xhr.response)
     else 
        console.log(`$xhr.status:$xhr.statusText`)
    

xhr.onerror = function (error) 
    console.log(error)

</script>

users.php

<?php

$users = [
    1 => "小明",
    2 => "李四",
    3 => "张三"
];
sleep(5);
echo $users[$_GET['id']];

发送表单

下面来使用 XMLHttpRequest 发送 POST 请求

后台服务
下面创建 users.php后台脚本（你可以使用你喜欢的后台脚本进行测试）

<?php
echo $_POST['title'];

前端异步请求

<form action="" id="form">
    <input type="text" name="title" />
    <input type="submit" />
</form>

<script>
    const form = document.getElementById('form')

    form.addEventListener('submit', function () 
        //阻止默认提交行为
        event.preventDefault()

        post('http://tt.cc/testData/users.php', new FormData(this))
    )

    function post(url, data) 
        const xhr = new XMLHttpRequest()
        xhr.open('POST', url)
        xhr.send(data)
        xhr.onload = () => 
            if (xhr.status == 200) 
                console.log(xhr.response)
             else 
                console.log(`$xhr.status:$xhr.statusText`)
            
        
    
</script>  

封装请求类

下面结合 Promise 来构建一个 XHR 异步处理类，使异步请求操作的变得更简单。

<script>
class HD 
  options = 
    responseType: 'json',
  
  constructor(method = 'GET', url, data = null, options) 
    this.method = method
    this.url = url
    this.data = this.formatData(data)
    Object.assign(this.options, options)
  
  formatData(data) 
    if (typeof data != 'object' || data == null) data = 
    let form = new FormData()
    for (const [name, value] of Object.entries(data)) 
      form.append(name, value)
    

    return form
  
  static get(url, options) 
    return new this('GET', url, null, options).xhr()
  
  static post(url, data, options) 
    return new this('POST', url, data, options).xhr()
  
  xhr() 
    return new Promise((resolve, reject) => 
      const xhr = new XMLHttpRequest()
      xhr.open(this.method, this.url)
      xhr.responseType = this.options.responseType
      xhr.send(this.data)
      xhr.onload = function () 
        if (xhr.status != 200) 
          reject( status: xhr.status, error: xhr.statusText )
         else 
          resolve(xhr.response)
        
      
      xhr.onerror = function (error) 
        reject(error)
      
    )
  


// 使用HD.get静态方法发送GET请求
HD.get('http://tt.cc/testData/user.php?name=wgchen', 
    responseType: 'text',
  ).then((response) => 
    console.log(response)
  )

// 使用HD.post静态方法发送POST请求
let data = title:'wgchen',url:'tt.cc'

HD.post('http://tt.cc/testData/users.php', data, 
  responseType: 'json',
).then((response) => 
  console.log(response)
)

</script>  

users.php

<?php

echo json_encode($_POST);

FETCH

FETCH是JS升级后提供的更简便的网络请求的操作方法，内部使用 Promise 来完成异步请求。

• response.json() 接收 JSON 类型数据
• response.text() 接收 TEXT 类型数据
• response.blog() 接收 Blog 二进制数据

请示步骤

使用 fetch 方法发送异步请求需要分以下两步操作

响应头解析

第一步对服务器返回的响应头进行解析，会接到 Response 类创建的对象实例，里面包含以下属性。

• status:HTTP状态码
• ok:状态码为 200-299 时为 true 的布尔值

响应内容解析

第二步对返回的保存在 response.body 中的响应结果进行解析，支持了以下几种方式对结果进行解析。

• response.json() 接收 JSON 类型数据
• response.text() 接收 TEXT 类型数据
• response.blog() 接收 Blog 二进制数据

以上方法不能同时使用，因为使用一个方法后数据已经被处理，其他方法就不可以操作了

实例操作

下面来体验使用 fetch 发送请求

后台服务

下面创建 users.php 后台脚本（你可以使用你喜欢的后台脚本进行测试）

<?php
$articles = [
    ['name' => 'wgchen'],
    ['name' => 'ycc'],
    ['name' => 'willem']
];
echo json_encode($articles);

发送请求 get

下面使用 FETCH 发送 GET 请求

<script>

fetch(`http://tt.cc/testData/users.php`)
.then(response => 
    return response.json()
)
.then(articles => 
    console.log(articles)
)

</script>  

因为 fetch 结果是 promise 所以也可以使用 async/await 操作

<script>

async function query() 
  const response = await fetch(`http://tt.cc/testData/users.php`)
  const articles = await response.json()
  console.log(articles)

query()

</script>  

发送请求 post

发送POST请求需要设置请求头 Request header

发送请求

发送的JSON类型需要设置请求头为 application/json;charset=utf-8

<script>


async function post() 
    const response = await fetch(`http://tt.cc/testData/users.php`, 
        method: 'POST',
        headers: 
            'Content-Type': 'application/json;charset=utf-8',
        ,
        body: JSON.stringify( name: 'wgchen' ),
    )
    if (response.ok) 
        const articles = await response.json()
        console.log(articles)
    

post()

</script> 

后台响应

因为前台发送的是非表单数据，而是 JSON 字符串所以后台使用 php://input 来接收数据

<?php
echo file_get_contents('php://input');