异步、闭包、fetch

最新推荐文章于 2024-07-23 19:01:27 发布

第八个猴子

最新推荐文章于 2024-07-23 19:01:27 发布

阅读量268

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/dal3546/p/10208064.html

版权

闭包

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
闭包有三个特性：
1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变量不会被垃圾回收机制回收

如果这道题仅仅是考察候选人对 JS 异步代码、变量作用域的理解，局限性未免太大，接下来我会追问，如果期望代码的输出变成： 0,1,2,3,4

for (var i = 0; i < 5; i++) 
    (function(j) {  // j = i
        setTimeout(function() {
            console.log(new Date, j);
        }, 1000);
    })(i);
}

巧妙的利用 IIFE**（Immediately Invoked Function Expression：声明即执行的函数表达式）

对循环体稍做手脚，让负责输出的那段代码能拿到每次循环的 i 值,利用 JS 中基本类型（Primitive Type）的参数传递是按值传递**（Pass by Value）的特征

for (var i=1; i<=5; i++) {
     (function() {
         var j = i;
         setTimeout( function timer() {
             console.log( j );
         }, j*1000 );
})(); }

for (var i = 0; i < 5; i++) {
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}

这里给 setTimeout 传递了一个立即执行函数。额，setTimeout 可以接受函数或者字符串作为参数，那么这里立即执行函数应该是个 undefined ，也就是说等价于：
setTimeout(undefined, ...);
而立即执行函数会立即执行，那么应该是立马输出的。
多以还是立马输出0-4；

异步编程方法

js中的异步编程共有下面这些方法，好吧以前我就知道前两个，其中事件监听和观察者有些类似，下面我们将分别介绍

回调函数
事件监听
观察者
Promise
Generator
async/await

回调函数
callback是我们最熟悉的方式，上面提到的动画的例子，用callback实现代码如下
moveTo(100, 0, function () { moveTo(200, 0, function () { moveTo(300, 0, function () { moveTo(400, 0, function () { // 无限不循环 }) }) })})

Node采用的是first error，所有系统异步接口第一个参数都是error对象

function callback(err, data) { if (err) { // 出错 return; } // 成功 console.log(data);}async("url", callback);

pub和sub函数
let eventMap = {};function pub(msg, ...rest) { eventMap[msg] && eventMap[msg].forEach((cb) => { cb(...rest); });}function sub(msg, cb) { eventMap[msg] = eventMap[msg] || []; eventMap[msg].push(cb);}

Promise

Promise其实是一种控制反转，举个例子，就是原来我们要给异步函数传入一个回调函数，现在变成了异步函数返回一个Promise对象，堪称神来之笔，而Promise就是实现这种反转的工具，Promise是一个双方约定的契约（规范）
其实Promise还有很多优点，要知道Promise是后面新技术的基础，堪称一切异步方案的粘合剂，没有Promise，可能就不会有generator，那么为什么说是可能呢？请看Generator一节
Promise解决了回调的一些问题，但并没有全部解决，比如Promise有很好的错误追踪，避免了回调地狱，对并发执行很友好，因为Promise只决议一次，就很好的解决了信任问题
但Promise对违反直觉并不友好，回调变成了长长的Promise链
var chain = Promise.resolve();for (let i = 0; i < arr.length; ++i) { chain = chain.then(() => async(arr[i]).then((x) => arr[i] = x))}

Generator
Generator是一个革命性特性，es2015(es6)中引入，让原本必须一次执行完毕函数，现在可以在中间暂停，并在下次继续执行，这就让js可以模拟协程的概念

动画的例子用generator实现如下，就好像是同步的一样
function* gen() { yield moveTo(100, 0) yield moveTo(200, 0) yield moveTo(300, 0) yield moveTo(400, 0) // 无限不循环}run(gen)

moveTo函数如下
function moveTo(x = 0, y = 0) { return new Promise(function (resolve, reject) { move('.box').x(x).y(y).end(resolve); })}

run函数
function run(fn) { let gen = fn() function next(data) { var res = gen.next(data) if (res.done) return res.value; res.value.then(function (data) { next(data) }) } next()}

生成器要实现异步，必须得有启动函数，也就是run，好在社区有封装好的run函数，比如co这个库

async function run() { await moveTo(100, 0) await moveTo(200, 0) await moveTo(300, 0) await moveTo(400, 0) // 无限不循环}run()

moveTo函数如下
async function moveTo(x = 0, y = 0) { await new Promise(function (resolve, reject) { move('.box').x(x).y(y).end(resolve); })}

fetch

1.RN官方文档中,可使用XMLHttpRequest

var request = new XMLHttpRequest(); request.onreadystatechange = (e) => { if (request.readyState !== 4) { return; } if (request.status === 200) { console.log('success', request.responseText); } else { console.warn('error'); } }; request.open('GET', 'https://mywebsite.com/endpoint.php'); request.send(); 这是http的原生方法,这里不做多的介绍. 2.RN官方文档中,推荐使用fetch

fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) }).then(function(res){ 　　console.log(res) })body中的数据就是我们需要向服务器提交的数据,比如用户名,密码等;如果上述body中的数据提交失败,那么你可能需要把数据转换成如下的表单提交的格式:

fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: 'key1=value1&key2=value2' }).then(function(res){

　　console.log(res) }) 这样可以获取纯文本的返回数据. 如果你需要返回json格式的数据: fetch('https://mywebsite.com/endpoint/').then(function(res) {

if (res.ok) {

res.json().then(function(obj) {

// 这样数据就转换成json格式的了

})

}

}, function(ex) {

console.log(ex)

})

fetch模拟表单提交:

fetch('doAct.action', {

method: 'post',