fetch-promise
阿新 • • 發佈:2018-12-27
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