1. 程式人生 > >fetch-promise

fetch-promise

ryu 實例化 初始 template bsp nor 構造 事件 get請求

一. 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