当前位置: 首页 > 工具软件 > nutch-ajax > 使用案例 >

fetch发起ajax请求

唐珂
2023-12-01

fetch()方法与XMLHttpRequest类似,fetch也可以发起ajax请求,但是与XMLHttpRequest不同的是,fetch方式使用Promise,相比较XMLHttpRequest更加的简洁。

Promise是进行异步操作的一种解决方案,比传统的处理方法(回调函数/处理事件)更加合理,ES6将其写入了语言标准,统一了语法,原生提供了Promise。 Promise可以想象成一个装有各种结果的容器,里面装有某个时间返回来的结果,你可以在需要的时候拿取它并进行一些事件处理。

基本的fetch请求

  • fetch第一个参数为url地址,url参数是必须要填写的,option可选,设置fetch调用时的Request对象,如method、headers等
  • 比较常用的Request对象有:method - 支持 GET, POST, PUT, DELETE, HEAD
  • url - 请求的 URL
  • headers - 对应的 Headers 对象
  • body - 请求参数(JSON.stringify 过的字符串或’name=jim\u0026age=22’ 格式)

Response响应

fetch方法的then会接收一个Response实例,值得注意的是fetch方法的第二个then接收的才是后台传过来的真正的数据,一般第一个then对数据进行处理等。

fetch('/some/url', { method: 'get', })
    // 第一个then  设置请求的格式
        .then(e => e.json())
        // 第二个then 处理回调
        .then((data) => {
         <!-- data为真正数据 -->
    }).catch(e => console.log("Oops, error", e))

 类似资料: