Javascript 新特性(2)

1.JavaScript 代理

• 由来：
  有时候我们需要监控或拦截对一个对象的操作——比如读取属性、赋值、删除等，并在这些操作发生时执行自定义逻辑（如校验、日志、响应式更新等）。

  为此，ES6 引入了 Proxy（代理）机制：它能创建一个目标对象的代理，从而在不修改原对象的前提下，拦截并自定义其基本行为。

• Proxy 是一个构造函数，接收两个参数

  • target：要被代理的目标对象（原始数据源，只能是对象、数组，不能不能直接代理基本类型）；
  • handler：一个配置对象，它的属性是一些陷阱函数（trap functions），用于定义代理在各种操作下的行为。

对 proxy 的操作，最终会作用到 target 上；
proxy 和 target 是双向绑定的——通过代理修改属性，原对象也会变；直接改原对象，代理读取时也会反映出来（但不会触发 handler 中的拦截）。

const p = new Proxy(target, handler)

• 基本用法：通过 handler 中的陷阱方法，可以监听对象的各种操作。常见陷阱包括：

  • get(target, prop)：读取属性时触发
  • set(target, prop, value)：设置属性时触发
  • deleteProperty(target, prop)：删除属性时触发

• 示例代码

<script>
    //配置项
    var handler = {
        //读取时触发
        //第一个参数就是target,也就是包装的目标对象
        //第二个参数数访问的属性值
        get(obj, prop) {
            console.log('get执行')
            return obj[prop]
        },
        //修改时触发
        set: function (obj, prop, value){
            console.log('set执行')

            obj[prop] = value
        },
        //删除属性时触发
        deleteProperty(obj, prop){
            console.log('deleteProperty执行')
        }
    }
    const p = new Proxy({}, handler)

    //赋值触发set
    p.name = "张三"

    //读取触发get
    console.log(p.name)

    //删除触发deleteProperty
    delete p.name
</script>

在 set 和 deleteProperty 中，必须手动操作 obj，否则属性不会真正改变；
在严格模式下，set 和 deleteProperty 必须返回 true/false，否则会报错；
直接操作原始 target 对象（绕过 proxy）不会触发任何拦截。
Proxy 不是“复制”对象，而是给对象套上一层“监听壳”

• 浏览器兼容性
  

2.Fetch

• 作用：用更现代、更简洁、基于 Promise 的方式替代 XHR（XMLHttpRequest），让异步请求更好写、更好组合、更符合 JavaScript 的发展趋势
• 基本语法：传入url，用then获取返回数据

fetch('http://127.0.0.1:8097/api/data.json').then(res=>{
     console.log(res)
})

• 第二个参数，对象类型，有以下常用字段

字段	说明
body	请求参数，附带在请求体中
headers	请求头
method	请求的方法，比如 "GET"、"POST"，默认值是 "GET"
mode	指定请求的模式，默认cors，表示允许跨源请求，same-origin表示只允许同源请求，这里js层面允许，能不能拿到数据还得看后端的接口设置

• 返回值：返回一个 Promise，resolve 时回传 Response 对象，Response.body 是 ReadableStream（可读流）数据，可以对其进行转换

async getMsg(){
      //发请求获取响应
      const response = await fetch('http://127.0.0.1:8097/api/data.json')
      //转换数据为json
      const json_data = await response.json()
      console.log(json_data)
}

• Fetch 想解决 XHR 的几个痛点：

XHR 的问题	Fetch 的改进
回调地狱（onreadystatechange）	基于 Promise，天然支持 async/await
API 设计老旧、冗长	语法简洁，链式调用清晰
配置分散（open + setRequestHeader + send）	一次性传入配置对象

不是为了“功能更强”，而是为了“写起来更舒服、更现代化”

• Fetch 和 XHR 的核心区别

对比维度	XMLHttpRequest (XHR)	Fetch
出现时间	1999 年（IE5）	2015 年（ES6 时代）
编程范式	回调（Callback）	Promise（支持 async/await）
默认行为	自动发送 cookie（同域）	默认不带 cookie（需手动设 credentials: 'include'）
错误处理	只有网络失败才触发 onerror；HTTP 404/500 仍算“成功”	同样：只有网络故障才 reject；404/500 仍 resolve（需手动检查 response.ok）
取消请求	支持 xhr.abort()	原生不支持，需配合 AbortController
浏览器兼容	所有浏览器（包括 IE）	现代浏览器（IE 不支持）
上传/下载进度	支持 onprogress	原生不支持（需读取 response.body 流手动处理）

Fetch所谓404/500 仍算“成功”：指的是不会被trycatch的错误捕获
不支持超时设置（需自己用 AbortController + setTimeout 实现）
Fetch它简化了“写法”，没简化“HTTP 本身”