promise fetch

最新推荐文章于 2024-04-15 10:39:00 发布
最新推荐文章于 2024-04-15 10:39:00 发布
阅读量555 收藏 1
点赞数
分类专栏： javascript知识点记录 js小例子
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35480270/article/details/88645857
版权

promise
promise是一个对象，从它可以获取异步操作的消息，promise提供了统一的API，各种异步操作都可以用同样的方法进行处理。

promise对象的特点
（1）对象的状态不受外界影响，promise对象代表一个异步操作，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是promise这个名字的由来“承若”；
（2）一旦状态改变就不会再变，任何时候都可以得到这个结果，promise对象的状态改变，只有两种可能：从pending变为fulfilled，从pending变为rejected。这时就称为resolved（已定型）。如果改变已经发生了，你再对promise对象添加回调函数，也会立即得到这个结果，这与事件（event）完全不同，事件的特点是：如果你错过了它，再去监听是得不到结果的。

（3） 解决回调地狱（Callback Hell）问题

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

promise  解析

Promise构造函数接收一个函数作为参数，该函数的两个参数分别是resolve和reject，他们是两个函数，由Javascript引擎提供，不用自己部署。

resolve函数的作用是，将promise对象的状态从“pending”变为‘’resolved‘’，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise1.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

console.log(promise1);
// expected output: [object Promise]

1，then()方法

//做饭
function cook(){
    console.log('开始做饭。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('做饭完毕！');
            resolve('鸡蛋炒饭');
        }, 1000);
    });
    return p;
}
 
//吃饭
function eat(data){
    console.log('开始吃饭：' + data);
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('吃饭完毕!');
            resolve('一块碗和一双筷子');
        }, 2000);
    });
    return p;
}
 
function wash(data){
    console.log('开始洗碗：' + data);
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('洗碗完毕!');
            resolve('干净的碗筷');
        }, 2000);
    });
    return p;
}


//调用
cook()
.then(function(data){
    return eat(data);
})
.then(function(data){
    return wash(data);
})
.then(function(data){
    console.log(data);
});
或者
cook()
.then(eat)
.then(wash)
.then(function(data){
    console.log(data);
});

执行结果为
1:开始做饭
2:做饭完毕
3:开始吃饭：鸡蛋炒饭
4:吃饭完毕
5:开始洗碗  一块碗和一双筷子
6:洗碗完毕
7:洗碗完毕  干净的碗筷

2，reject()方法

//做饭
function cook(){
    console.log('开始做饭。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('做饭失败！');
            reject('烧焦的米饭');
        }, 1000);
    });
    return p;
}
 
//吃饭
function eat(data){
    console.log('开始吃饭：' + data);
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('吃饭完毕!');
            resolve('一块碗和一双筷子');
        }, 2000);
    });
    return p;
}
 
cook()
.then(eat, function(data){
  console.log(data + '没法吃!');
})

//执行结果
1:开始做饭
2:做饭失败
3:烧焦的米饭  没法吃

3，catch()方法

cook()
.then(eat)
.catch(function(data){
    console.log(data + '没法吃!');
});

它的另一个作用是，当执行 resolve 的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么也不会报错卡死 js，而是会进到这个 catch 方法中。

4，all()方法

Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

//切菜
function cutUp(){
    console.log('开始切菜。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('切菜完毕！');
            resolve('切好的菜');
        }, 1000);
    });
    return p;
}
 
//烧水
function boil(){
    console.log('开始烧水。');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
            console.log('烧水完毕！');
            resolve('烧好的水');
        }, 1000);
    });
    return p;
}
 
Promise
.all([cutUp(), boil()])
.then(function(results){
    console.log("准备工作完毕：");
    console.log(results);
});
//执行结果
1:开始切菜
2:开始烧水
3:切菜完毕
4:烧水完毕
5:准备工作完毕
6:['切好的菜','烧好的水']

5，race()方法

race 按字面解释，就是赛跑的意思。race 的用法与 all 一样，只不过 all 是等所有异步操作都执行完毕后才执行 then 回调。而 race 的话只要有一个异步操作执行完毕，就立刻执行 then 回调。

注意：其它没有执行完毕的异步操作仍然会继续执行，而不是停止。

Promise
.race([cutUp(), boil()])
.then(function(results){
    console.log("准备工作完毕：");
    console.log(results);
});

简单的Promise源码

function Promise(fn){
  var status = 'pending'
  function successNotify(){
      status = 'fulfilled'//状态变为fulfilled
      toDoThen.apply(undefined, arguments)//执行回调
  }
  function failNotify(){
      status = 'rejected'//状态变为rejected
      toDoThen.apply(undefined, arguments)//执行回调
  }
  function toDoThen(){
      setTimeout(()=>{ // 保证回调是异步执行的
          if(status === 'fulfilled'){
              for(let i =0; i< successArray.length;i ++)    {
                  successArray[i].apply(undefined, arguments)//执行then里面的回掉函数
              }
          }else if(status === 'rejected'){
              for(let i =0; i< failArray.length;i ++)    {
                  failArray[i].apply(undefined, arguments)//执行then里面的回掉函数
              }
          }
      })
  }
  var successArray = []
  var failArray = []
  fn.call(undefined, successNotify, failNotify)
  return {
      then: function(successFn, failFn){
          successArray.push(successFn)
          failArray.push(failFn)
          return undefined // 此处应该返回一个Promise
      }
  }
}

fetch

  fetch规范与jQuery.ajax()主要有两种方式的不同，牢记：

  • 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
  • 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。
fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });
postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

function postData(url, data) {
  // Default options are marked with *
  return fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })
  .then(response => response.json()) // parses response to JSON
}
//  使用 fetch()  POST JSON数据
var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

Fetch会返回Promise，所以在获取资源后，可以使用.then方法做你想做的.如果这是你第一次遇见Fetch，也许惊讶于Fetch返回的response。如果console.log返回的response，会得到下列信息：

{
  body: ReadableStream
  bodyUsed: false
  headers: Headers
  ok : true
  redirected : false
  status : 200
  statusText : "OK"
  type : "cors"
  url : "http://some-website.com/some-url"
  __proto__ : Response
}

如果请求一个XML格式文件，则调用response.text。如果请求图片，使用response.blob方法。

所有这些方法(response.json等等）返回另一个Promise，所以可以调用.then方法处理我们转换后的数据。

fetch('https://api.github.com/users/chriscoyier/repos')
  .then(response => response.json())
  .then(data => {
    // data就是我们请求的repos
    console.log(data)
  });

使用Fetch发送也很简单，只需要配置三个参数。

fetch('some-url', options);

第一个参数是设置请求方法（如post、put或del），Fetch会自动设置方法为get。

第二个参数是设置头部。因为一般使用JSON数据格式，所以设置ContentType为application/json。

第三个参数是设置包含JSON内容的主体。因为JSON内容是必须的，所以当设置主体时会调用JSON.stringify。

let content = {some: 'content'};

// The actual fetch request
fetch('some-url', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(content)
})
// .th

为了处理错误，我们需要使用catch方法。

fetch('https://api.github.com/users/chrissycoyier/repos')
  .then(response => response.json())
  .then(data => console.log('data is', data))
  .catch(error => console.log('error is', error));
//但是上面的方法无法知道请求是否正常  是否请求成功，所以需要去捕捉到错误

//带catch的正常的代码
fetch('https://api.github.com/users/chrissycoyier/repos')
  .then(response => {
    if (response.ok) {
      return response.json()
    } else {
      return Promise.reject('something went wrong!')
    }
  })
  .then(data => console.log('data is', data))
  .catch(error => console.log('error is', error));

Fetch是很好的方法，能发送和接收数据。不需要在编写XHR请求或依赖于jQuery。

尽管Fetch很好，但是其错误处理不是很直接。在处理之前，需要让错误信息进入到catch方法中。

 

 

 

 

 

 

web还不是
关注
专栏目录
Fetch与Promise
LucioCN
03-16 7万+
本文不是 Fetch API 科普贴，其实是讲异步处理和 Promise 的。Fetch API 很简单，看文档很快就学会了。推荐 MDN Fetch 教程 和 万能的 WHATWG Fetch 规范由于 Fetch API 是基于 Promise 设计，有必要先学习一下 Promise，推荐阅读 MDN Promise 教程 。旧浏览器不支持 Promise，需要使用 polyfilles6-p...
fetch+promise
伟大的路人 的博客
08-31 752
fetch+promise我知道的是针对一个请求的，且返回promise对象，then中以resolve接收response，下面先简单介绍下组合使用场景一、结合超时处理//基本配置参数 let defaultOption = { timeout: 5000, method: 'post', data: null,
promise&fetch
qq_43977829的博客
11-26 242
promise promise状态 pending（进行中）、fulfilled（已成功）和 rejected（已失败）。 then方法 then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。 通过 .then 形式添加的回调函数，不论什么时候，都会被调用。 fetch fetch 规范与 jQuery.ajax() 的区别： 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回
异步请求Promise,Fetch(入门，小白)
最新发布
2301_76596831的博客
04-15 1077
（像套娃一样）promise对象：Promise是一种异步编程的概念，它表示一个可能还没有完成的操作，但是在将来的某个时间点会完成并返回结果。Promise是一个对象，可以获取异步操作的消息,Promise 异步操作有三种状态:pending(进行中)，fulfilled(已成功)和 rejected(已失败)。除了异步操作的结果，任何其他操作都无法改变这个状态。
学习随笔之 Promise、fetch
时秋的博客
06-02 590
Promise 一种异步的解决方案 Promise 构造函数 new Promise( function(resolve, reject) {...} /* executor */ ); fetch() 封装了Promise提供了更简洁的展示方式这个函数最后会返回成Promise fetch() 函数接口 Promise&amp;lt;Response&amp;gt; fetch(input[,...
Promise，Ajax，fetch
work hard
07-25 1882
一、Promise相关 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise http://liubin.org/promises-book/#chapter1-what-is-promise new Promise( /* executor：execu
Vue 接口异步 Promise fetch axios
qq_38232003的博客
08-26 332
接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程 异步模式可以一起执行多个任务 JS中常见的异步调用 定时任何 ajax 事件函数 promise 主要解决异步深层嵌套的问题 promise 提供了简洁的API 使得异步操作更加容
vue前后端交互promise方法和fetch方法
ehengyyds的博客
08-18 226
promise基本用法：实例化promise对象，构造函数传递函数，函数用来处理异步任务，resove和reject两个参数用来处理成功和失败两种清空，通过p.then获取处理结果data接受正确的参数info接受错误的参数。 onreadystatechange 事件 当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 在
Fetch+Promise教程
09-19
Fetch+Promise教程 Fetch API 是一种现代化的网络请求方式，旨在取代传统的 XMLHttpRequest。它提供了许多优点，包括链式调用的语法、返回 Promise 等。Fetch API 的概念和用法、Headers 对象、Request 对象等都是...
Fetch API基于Promise封装的Http请求接口详解
有问题 ! 请留言 !
01-16 1803
fetch接口是用来解决Ajax（xhr）在写法和调用上的不合理和开放的js接口，已经在很多项目上使用，运行良好，取代ajax也只是时间问题，虽然fetch还有一些功能不全面但是使用上已经没有什么问题，所以我写下来记录一下自己的学习 两者对比 Ajax请求 var xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseTyp...
关于Promise和fetch的使用
m0_55861837的博客
03-23 1688
浅浅说明promise，关于fetch的使用方法，
promise和fetch
runner_123的博客
03-21 738
1、promise 是一个对象，代表异步操作，有3种状态，pending\resolved\rejected 特点 （1）对象的状态不受外界影响 （2）一旦状态改变就不会再改变 构造一个promise实例 var mypromise = new Promise(function(resolve,reject){ //...some code if(成功){ ...
Promise之fetch（二）
qq_43534980的博客
08-18 328
1. fetch的基本使用，fetcg是基于promise的封装的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> /* Fetch API 调用.
promise 与 fetch 详细介绍 与 使用
JavaCode
09-17 2652
1. promise 1.1  含义 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大； 1.2  基本语法 new Promise(function(resolve, reject) { // ... some code 比如发送ajax if (/* 异步操作成功 */){ resolve(value); } e...
fetch的用法ajax,Promise发送Ajax请求、fetch用法
weixin_36187176的博客
08-05 200
实例方法：Document/*基于Promise发送Ajax请求*/function queryData(url) {var p = new Promise(function(resolve, reject){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState != 4) retu...
关于fetch中使用的promise对象理解
good_good_xiu的博客
07-06 1026
ECMAscript 6 原生提供了 Promise 对象。 Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。 Promise 对象有以下两个特点: 1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态： pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意
关于promise和fetch
qq_49378268的博客
12-05 334
promise 主要解决异步深层嵌套的问题 promise 提供了简洁的API 使得异步操作更加容易 <script type="text/javascript"> /* 1. Promise基本使用 我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传 后的回调函数 */ var p = new Promise(function(resolve, reject){ /
使用 fetch 封装网络请求，返回promise 对象
weixin_34119545的博客
10-20 1451
1.fetch 的概念和用法 fetch 提供了对Request和Response（以及其他与网络请求有关的）对象的通用定义。使之今后可以被使用到更多地应用场景中：无论是service workers、Cache API、又或者是其他处理请求和响应的方式，甚至是任何一种需要你自己在程序中生成响应的方式。 它还提供了一种定义，将CORS 和 HTTP 原生的头信息结合起来，取代了原来那...
谈谈 Promise 以及实现 Fetch 的思路
gg7894125的博客
06-24 876
Promise 是异步编程的一种解决方案。 Promise /** 属性 */ Promise.length Promise.prototype /** 方法 */ Promise.all(iterable) // 所有成功触发成功 任何失败触发失败 Promise.race(iterable) // 任意一个成功或失败后触发 Promise.reject(reason) Promise.resolve(value) /** 原型 */ Promise.prototype.construc
Fetch与Promise详解：现代前端数据交互利器
"这篇文档是关于Fetch API和Promise的教程，涵盖了这两个JavaScript技术的基本概念、用法以及在ES6和Web开发中的应用。文档详细解释了Fetch API如何替代XMLHttpRequest，其优势在于链式调用的语法和Promise的使用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值