码迷,mamicode.com
首页 > 其他好文 > 详细

fetch-promise

时间:2018-12-27 15:39:22      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:amp   head   ESS   16px   ati   事件   ges   erb   load()   

一. promise 对象

  promise是ECMAscript 6 提供的构造函数, new Promise() 创建的对象代表了将来要发生的事件,它有如下特点:

    1)状态一旦发生变化,就不受外界影响; 任何时候给Promise 对象添加回调函数,它都保持在这个状态

      其状态变化有以下两种形式:

        pending(初始状态)  --> fulfilled(操作成功)

        pending --> rejected(操作失败)

    2)实例化的 promise 对象可以调用 .then() 和 .catch()方法接收 onFUlfilled 和 onRejected 状态的返回值

  阮一峰大神的理解:

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

 

二.  fetch 发get 和 post 请求,返回的是一个promise对象

//1.发送get请求, 参数在url中拼接
var num = 1;
fetch("/user/queryUser?page="+num+"&pageSize=5").then(res

   =>res.json()).then(data =>{
        console.log(data);
        $(‘#userBox‘).html(template(‘userTpl‘, {data: data}))

   }).catch(err =>{
          console.log(err);
})
//2.发送post 请求, 参数在 body中传递, 而且必须转换为字符串

fetch(‘url‘, {
            method: ‘post‘,
            //body: JSON.stringify(data),
            body: JSON.stringify({
                name: ‘nora‘,
                age: 18
            }),
            headers : {
                ‘Content-Type‘ : ‘application/json‘
            }
        }).then(res => res.json()).then(data =>{
            //console.log(data);
                if(data.success) {
                location.reload()
            }
        }).catch(err =>{
            alert(err);
        })

    

 

fetch-promise

标签:amp   head   ESS   16px   ati   事件   ges   erb   load()   

原文地址:https://www.cnblogs.com/noraZhang/p/10184496.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!