JavaScript 通过XMLHttpRequest(XHR)来执行异步请求。它在设计上不符合职责分离原则，将输入、输出和用事件来跟踪的状态混杂在一个对象里。

这与最近JavaScript流行的Promise以及基于生成器的异步编程模型，匹配不够协调。

新的 Fetch API打算修正上面提到的那些缺陷。它引入一个实用的函数fetch()用来简洁捕捉从网络上检索一个资源的意图。

它尝试优化：

             支持异步编程

             离线性能更佳

             兼容主流浏览器，IE6, IE7, IE8…..

             简单，可靠，好用

推荐做法

安装

---

$ npm install fetch-polyfill2 --save

$ npm install bluebird -- save

$ npm install json3 -- save

使用

---

constloginurl="http://192.168.1.50:8080/user/login";

fetch(loginurl, {

method:'POST',

headers: {

'Accept':'application/json',

'Content-Type':'application/json'

},

body:{

"phone":this.state.phone,

"password":this.state.password

}

}).then(function(response){

returnresponse.json()

}).then(function(json){

console.log('parsed json', json)

}).catch(function(ex){

console.log('parsing failed', ex)

})

localStorage 指导

---

此处推荐使用store.js操作localStorage，理由如下：

可靠，支持各大主流浏览器

支持json格式存储

简单，好用

安装

下载目标文件，链接

---

// 载入文件

init()

functioninit(){

//判断浏览器支持情况

if(!store.enabled) {

alert('Local storage is not supported by your browser. Please disable "Private Mode", or upgrade to a modern browser.')

return

}

varuser = store.get('user')

// ... and so on ...

}

使用API

// Store 'marcus' at 'username'

store.set('username','marcus')

// Get 'username'

store.get('username')

// Remove 'username'

store.remove('username')

// Clear all keys

store.clear()

// Store an object literal - store.js uses JSON.stringify under the hood

store.set('user', { name:'marcus', likes:'javascript'})

// Get the stored object - store.js uses JSON.parse under the hood

varuser = store.get('user')

alert(user.name +' likes '+ user.likes)

// Get all stored values

store.getAll().user.name =='marcus'

// Loop over all stored values

store.forEach(function(key, val){

console.log(key,'==', val)

})