sails框架使用fetch.js进行通讯

JavaScript 通过XMLHttpRequest(XHR)来执行异步请求，这个方式已经存在了很长一段时间。虽说它很有用，但它不是最佳API。它在设计上不符合职责分离原则，将输入、输出和用事件来跟踪的状态混杂在一个对象里。而且，基于事件的模型与最近JavaScript流行的Promise以及基于生成器的异步编程模型不太搭（事件模型在处理异步上有点过时了——译者注）。
新的 Fetch API打算修正上面提到的那些缺陷。 它向JS中引入和HTTP协议中同样的原语（即Fetch——译者注）。具体而言，它引入一个实用的函数fetch()用来简洁捕捉从网络上检索一个资源的意图。[https://www.w3ctech.com/topic... (https://www.w3ctech.com/topic...

开始

fetch.js 目前只支持异步

nodejs的sails框架通过

nodemon app.js 

已经启动了，并且使用nodemon命令，在每次进行修改js文件的时候都会进行重新启动，方便我们调试。

[nodemon] restarting due to changes...
[nodemon] starting `node app.js`

前端代码

<script type="text/javascript">
    // 构造了表单数据对象
    var formdata = new FormData();
    formdata.append('name','segmentfault');

    fetch('/user/ajax_page',{
        method:'POST', // 使用body的时候一定要指定post
        body:formdata 
    })
    .then(function(res){
        return res.json().then(function(json) {
            return json;
        })
    }).then(function(json) {
        console.info(json);
    });
</script>

注意：上面指定body为formdata的时候，一定要注意method为POST，不然会报错：

Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body.

后台接受处理参数

sails的req对象文档中是这样描述的,

Sails is built on Express, and uses Node's HTTP server conventions. Because of this, you can access all of the Node and Express methods and properties on the req object whereever it is accessible (i.e. in your controllers, policies, and custom responses.)地址http://sailsjs.com/documentation/reference/request-req

意思就是说sails框架是基于express框架的，你可以使用所有来自node和express框架req对象的方法、属性。

针对上面这段话，而且我们没有在sails里面找到详细的req的说明，只是看到一份req的方法列表，于是去express找找看。

express api

上面的就是express 的说明，里面针对request的属性和方法都有详细的说明，所以我们找到两个可以获取从前端传递过来值得方法

// 属性
req.body;
// 方法
req.param('name');

后端代码

直接将获取到的内容进行了返回。

    ajax_page:function(req, res){
        console.info(req.body);
        console.info(req.param('name'));
        var records = req.body;
        return res.json(records);
    }

前端得到的结果

打开浏览器的控制台就可以看到结果了。

Object {name: "segmentfault"}

相关资料

Using_Fetch#自定义请求的参数

GlobalFetch/fetch

Using_FormData_Objects