Promise 基础使用

Promise

    function getData(url, data = {}){
        new Promise((resolve, reject) => {
            $.ajax({
                type:'GET',
                url:url,
                data:data,
                success:function(res){
                    // 修改promise的状态为成功，修改promise的结果
                    resolve(res)
                },
                error:function (res) {
                    // 修改promise的状态为失败，修改promise的结果
                    reject(res)
                }
            })
        })
    }

    getData("data1.json")
        .then((data) => {
            const {id} = data;// 对象解构
            return getData("data2.json", {id});
        })
        .then((data) => {
            const {username} = data;// 对象解构
            return getData("data3.json", {username});
        })
        .then((data) => {
            console.dir(data)
        })

fetch介绍

fetch() 是一个全局方法，提供一种简单，合理的方式跨网络获取资源。它的请求是基于 Promise 的

fetch(url,options).then((response)=>{
//处理http响应
},(error)=>{
//处理错误
})

url ：是发送网络请求的地址。

options：发送请求参数,

body - http请求参数
mode - 指定请求模式。默认值为cros:允许跨域;same-origin:只允许同源请求;no-cros:只限于get、post和head,并且只能使用有限的几个简单标头。
cache - 用户指定缓存。
method - 请求方法，默认GET
signal - 用于取消 fetch
headers - http请求头设置
keepalive - 用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据。
credentials - cookie设置，默认omit，忽略不带cookie，same-origin同源请求带cookie，inclue无论跨域还是同源都会带cookie。

response 对象

status - http状态码，范围在100-599之间
statusText - 服务器返回状态文字描述
ok - 返回布尔值，如果状态码2开头的，则true,反之false
headers - 响应头
body - 响应体。响应体内的数据，根据类型各自处理。
type - 返回请求类型。
redirected - 返回布尔值，表示是否发生过跳转。

读取内容方法

response 对象根据服务器返回的不同类型数据，提供了不同的读取方法。分别有：

response.text() -- 得到文本字符串
response.json() - 得到 json 对象
response.blob() - 得到二进制 blob 对象
response.formData() - 得到 fromData 表单对象
response.arrayBuffer() - 得到二进制 arrayBuffer 对象

上述 5 个方法，返回的都是 promise 对象，必须等到异步操作结束，才能得到服务器返回的完整数据。

response.clone()

stream 对象只能读取一次，读取完就没了，这意味着，上边的五种读取方法，只能使用一个，否则会报错。

因此 response 对象提供了 clone() 方法，创建 respons 对象副本，实现多次读取。如下：将一张图片，读取两次：

response.body()

body 属性返回一个 ReadableStream 对象，供用户操作，可以用来分块读取内容，显示下载的进度就是其中一种应用。

const response = await fetch('flower.jpg');
const reader = response.body.getReader();
while(true) {
  const {done, value} = await reader.read();
  if (done) {
    break;
  }
  console.log(`Received ${value.length} bytes`)
}

response.body.getReader() 返回一个遍历器，这个遍历器 read() 方法每次都会返回一个对象，表示本次读取的内容块。

请求时 POST 和 GET 分别处理

请求方式不同，传值方式也不同。xhr 会分别处理 get 和 post 数据传输，还有请求头设置，同样 fetch 也需要分别处理。

2.1、get 方式

只需要在url中加入传输数据，options中加入请求方式。如下面代码所示：

<input type="text" id="user"><br>
<input type="password" id="pas"><br>
<button onclick="login()">提交</button>
<script>
 function login(){
  fetch(`http://localhost:80/fetch.html?user=${user.value}&pas=${pas.value}`,{
   method:'GET'
  }).then(response=>{
   console.log('响应',response)
  })
 }
</script>

post 方式

使用 post 发送请求时，需要设置请求头、请求数据等。

将上个实例，改写成 post 方式提交数据，代码如下：

fetch(`http://localhost:80/ES6练习题/53fetch.html`,{
 method:'POST',
 headers:{
  'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
 },
 body:`user=${user.value}&pas=${pas.value}`
 }).then(response=>{
  console.log('响应',response)
})

如果是提交json数据时，需要把json转换成字符串。如

body:JSON.stringify(json)

如果提交的是表单数据，使用 formData转化下，如：

body:new FormData(form)

上传文件，可以包含在整个表单里一起提交，如：

const input = document.querySelector('input[type="file"]');

const data = new FormData();
data.append('file', input.files[0]);
data.append('user', 'foo');

fetch('/avatars', {
  method: 'POST',
  body: data
});

上传二进制数据，将 bolb 或 arrayBuffer 数据放到body属性里，如：

let blob = await new Promise(resolve =>   
  canvasElem.toBlob(resolve,  'image/png')
);

let response = await fetch('/article/fetch/post/image', {
  method:  'POST',
  body: blob
});

fetch 常见坑

3.1、fetch兼容性

fetch原生支持率如图：

fetch 是相对较新的技术，IE浏览器不支持，还有其他低版本浏览器也不支持，因此如果使用fetch时，需要考虑浏览器兼容问题。

解决办法：引入 polyfill 完美支持 IE8 以上。

由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham
引入 Promise 的 polyfill：es6-promise
引入 fetch 探测库：fetch-detector
引入 fetch 的 polyfill： fetch-ie8
可选：如果你还使用了 jsonp，引入 fetch-jsonp
可选：开启 Babel 的 runtime 模式，现在就使用 async/await

polyfill 的原理就是探测fetch是否支持，如果不支持则用 xhr 实现。支持 fetch 的浏览器，响应中文会乱码，所以使用 fetch-detector 和 fetch-ie8 解决乱码问题。

3.2、fetch默认不带cookie

传递cookie时，必须在header参数内加上 credentials:'include'，才会像 xhr 将当前cookie 带有请求中。

3.3、异常处理

fetch 不同于 xhr ，xhr 自带取消、错误等方法，所以服务器返回 4xx 或 5xx 时，是不会抛出错误的，需要手动处理，通过 response 中的 status 字段来判断。

  fetch("http://www.baidu.com")
    .then((response) => response.json())
    .then((json) => {
        console.log(json)
    })
    .catch((error) => {
        console.error(error)
    })
    .finally(() => {
        //清理工作
        stopLoadingAnimation()
    })

ECMA17 async/await

    async function f(){
        const response = await fetch("http://www.baidu.com")
    }
    f(); // 这个函数永远返回一个promise对象
    // async await 底层是promise跟Event Loop事件循环机制构成

陷阱

    async function f(){
        const a = await fetch("http://www.baidu.com/a/1")
        const b = await fetch("http://www.baidu.com/a/2")
    }

    // 效率提交
    async function f(){
        const promiseA = fetch("http://www.baidu.com/a/1")
        const promiseB = fetch("http://www.baidu.com/a/2")
        const [a, b] = await Promise.all([promiseA, promiseB])
    }

// 错误的
    async function f(){
       [1,2,3].forEach(async (i) => {
            await someAsyncOperation();
       })
    }
    // 用for循环
    async function f(){
        for (let i of [1,2,3]) {
            await someAsyncOperation();
        }
    }
    //优化的写法
    async function f(){
        const promises = [
            someAsyncOperation(),
            someAsyncOperation(),
            someAsyncOperation(),
        ];
        for await (let result of promises) {
            
        }
    }

posted on 2026-02-26 16:56 何苦-> 阅读(12) 评论(0) 收藏举报

刷新页面返回顶部

Promise 基础使用

fetch介绍

请求时 POST 和 GET 分别处理

fetch 常见坑

ECMA17 async/await

陷阱

导航

公告