promise和fetch

博客介绍了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返回的响应数据

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值