promise和fetch

最新推荐文章于 2025-05-11 17:31:58 发布

原创最新推荐文章于 2025-05-11 17:31:58 发布 · 789 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#fetch

javascript 专栏收录该内容

42 篇文章

订阅专栏

博客介绍了Promise和Fetch相关知识。Promise是代表异步操作的对象，有三种状态，其状态不受外界影响且一旦改变不再变化，实例生成后可用then方法指定回调。Fetch基于Promise设计，支持async和await，脱离XHR，返回Promise，获取资源后可进行相应操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、promise

是一个对象，代表异步操作，有3种状态，pending\resolved\rejected

特点

（1）对象的状态不受外界影响

（2）一旦状态改变就不会再改变

构造一个promise实例

var mypromise = new Promise(function(resolve,reject){
      //...some code
      if(成功){
        resolve(value)
    }else{
     reject(error)
    }
});

Promise构造函数接收一个函数作为参数，这个函数有两个参数，resolve 和reject

Promise实例生成以后，可以用then方法分别指定resolve和reject的回调函数

举例

function test(resolve, reject) {
    var timeOut = Math.random() * 2;
    console.log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
        if (timeOut < 1) {
            console.log('call resolve()...');
            resolve('200 OK');
        }
        else {
            console.log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}
new Promise(test).then(function (result) {
    console.log('成功：' + result);
}).catch(function (reason) {
    console.log('失败：' + reason);
});

输出结果为

分析：.then 里面接收的匿名函数，即为test里面的resolve,这里的result参数即为resolve("200 OK")中的参数“200 OK”

Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了：

promise.all() 将多个promise实例包装成新的promise实例

var p= promise.all([p1,p2,...}) 传入数组参数

只要p1,p2,...的状态都变为fulfilled，P的状态才会变为fulfilled。

只要p1,p2,...中有一个被rejected，p的状态就变为rejected，第一个被

rejected 的实例的返回值会传递给p的回调函数

promise.race() 将多个promise实例包装成新的promise实例

var p= promise.all([p1,p2,...}) 传入数组参数

只要p1,p2,...中有一个实例率先改变状态，p的状态就跟着改变，那个率先

改变的promise实例的返回值，就返回给p的回调函数

promise.resolve() 将现有对象转化为promise对象

promise.all() 和promise.race()的参数如果不是promise实例，会先调用promise.resolve

2、Fetch是基于promise设计的,支持async和await.脱离了XHR，是ES规范里新的实现方式

  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
      body: JSON.stringify({
      name: "ceido",
      age: 100
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  }).then(function(response) {
    console.log(response)
   return response.json();
  }).then(
    function(myJson) {
    console.log(myJson);
  })

Fetch会返回Promise，所以在获取资源后，可以使用.then方法做你想做的。

第一个response告知你请求的状态，第二个才是请求url返回的响应数据