promise Eslint sql传参方式 async-await

这是一篇学习笔记 各种融合的杂谈

Eslint学习

官网
中文教程

• 安装Eslint
  npm i eslint@latest g

• 配置文件 .eslintrc.json
  eslint --init

• eslint test.js

  1:5  error  'username' is assigned a value but never used                    no-unused-vars
  3:4  error  Expected a conditional expression and instead saw an assignment  no-cond-assign
  3:4  error  Unexpected constant condition                                    no-constant-condition
  3:4  error  'a' is not defined                                               no-undef
  4:5  error  Unexpected console statement                                     no-console
  7:5  error  'age' is assigned a value but never used                         no-unused-vars
  9:1  error  'number' is not defined                                          no-undef

• 安装vscode eslint插件 ESLint

nodejs数据库操作

sql传参方式

• 字符串拼接

var id = 10;
var sql = "SEELCT * FROM user WHERE id = '+id+'";

• 占位符

var id = 10;
var sql = "SEELCT * FROM user WHERE id = ?";
var param = [id];
query(sql,param,function(err,data){});

nodejs处理查询结果

var sql = "SELECT id,username,password  FROM user WHERE username = ?";
var param = ['小明'];
// 1. SEELCT查询返回对象data是一个数组对象
query(sql, param, function (err, data) {
if (err) {
console.log('查询用户出错!');
return;
}
for(var i = 0; i < data.length; i++){
console.log(data[i].username+ " "+data[i].password);
}
});

后台管理管理系统集成数据库

• 下载安装mysql第三方包
  npm i mysql --save
• 数据库操作模块引入 dbconnect.js
• 路由跳转处代替数组

遇到问题

• 封装的query函数 在关闭连接之后未重新创建

/**
* 封装通用数据库操作函数
*/
function query(sql, param,callFunction) {
//1. 配置数据库连接参数,创建连接对象
var connection = mysql.createConnection({
host: '192.168.41.118',
port: 3306,
user: 'test',
password: 'web1804',
database: 'usermanager'
});
//1. 建立连接
connection.connect();

// 2. 发送SQL语句到mysql服务端执行

connection.query(sql, param, callFunction);

// 3. 关闭连接
connection.end();
}

Promise

• 什么是promise?

  Promise是JavaScript中的一个对象，“承诺将来会执行”,它以更优雅的方式实现javascript中的异步回调操作。

  Promise本意是承诺，在程序中的意思就是承诺我过一段时间后会给你一个结果。 什么时候会用到？答案是异步操作，异步是指可能比较长时间才有结果的操作，例如网络请求、读取本地文件等

  1.Promise的三种状态

  Pending----Promise对象实例创建时候的初始状态
• Fulfilled----可以理解为成功的状态
• Rejected----可以理解为失败的状态

Javascript是一种单线程的语言， 所有的代码必须按照所谓的“ 自上而下” 的顺序来执行。 本特性带来的问题， 在处理耗时操作时， 程序会阻塞， 这时需要使用异步编程；
异步编程的一种实现方式就是回调函数;
回调函数是 一个 解决方案， 但它并不完美。 两个很大的问题是：

1. 颠倒的控制；
2. 糟糕的错误处理.
3. 异步任务回调嵌套.

回调嵌套或回调地狱

fs.readFile(filename, function (err, data) {
if (err) {
console.log('读文件出错' + err);
} else {
console.log(data.toString());
fs.readFile(filename, function (err, data) {
if (err) {
console.log('读文件出错' + err);
} else {
console.log(data.toString());
fs.readFile(filename, function (err, data) {
if (err) {
console.log('读文件出错' + err);
} else {
console.log(data.toString());
}
});
}
});
}
});

• promise基础使用？

var promise = new Promise(function(resolve,rejcted){
//具体异步
db.query(sql,parameter,function(err,data){
if(err){
rejected(err);
} else{
resove(data);
}
});
});

promise.then(function(data){
console.log(data); //成功兑现
}).catch(function(err){
//处理错误
});

async-await

使用async/await，你可以轻松地达成之前promise做到的工作,它有如下特点：

1. async/await是基于Promise实现的，它不用于普通的回调函数。
2. async/await与Promise一样，是非阻塞的。
3. async/await使得异步代码看起来像同步代码，这正是它的魔力所在。

示例

var fs = require('fs');

function readFilePromise(path) {
return new Promise(function (resolved, rejected) {
fs.readFile(path, function (err, data) {
if (err) {
rejected(err);
} else {
resolved(data.toString());
}
});

});
}

async function readFile(){
var data1 = await readFilePromise('hello.txt');
console.log('data1 :'+data1);

var data2 = await readFilePromise('hello1.txt');
console.log('data2 :'+data2);

var data3 = await readFilePromise('hello2.txt');
console.log('data3 :'+data3);
}

readFile();

• try-catch-finally

var fs = require('fs');
var path = require('path');

console.log('开始');
try {
// 可能会发生异步的代码
var path1 = path.join(path.resolve('.'), '08await','./hello.txt');

var fileContent1 = fs.readFileSync(path1);
console.log(fileContent1.toString());

var path2 = path.join(path.resolve('.'), '08await', './hello1 1.txt');
var fileContent2 = fs.readFileSync(path2);
console.log(fileContent2.toString());

var path3 = path.join(path.resolve('.'), '08await', './hello2.txt');
var fileContent3 = fs.readFileSync(path3);
console.log(fileContent3.toString());

} catch (err) {
// 处理异步的代码
console.log('处理异步的代码 :' + err);
} finally {
//最终都会执行的代码
console.log('最终都会执行的代码');
}

console.log('结束');

• Promise异步任务并发执行
  Promise.all
  Promise.race

示例

var fs = require('fs');

function readFilePromise(path) {
return new Promise(function (resolved, rejected) {
fs.readFile(path, function (err, data) {
if (err) {
rejected(err);
} else {
resolved(data.toString());
}
});
});
}
// 最后一个异步任务执行完之后一起处理
Promise.all([readFilePromise('hello.txt'), readFilePromise('hello1.txt'), readFilePromise('hello2.txt')])
.then(function (data) {
console.log('data :' + data);
});

// 处理执行速度最快的异步任务
Promise.race([readFilePromise('hello.txt'), readFilePromise('hello1.txt'), readFilePromise('hello2.txt')])
.then(function (data) {
console.log('data :' + data);
});

promise封装ajax

function ajaxPromise(json) {
return new Promise(function(resolved,rejected){
// 1. 获取 XmlHttpRequest
var xhr = getXHR();

// 2. 打开连接发送请求
xhr.open(json.method, json.url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // 请求头部
xhr.send(json.content);

// 3. 处理响应
xhr.onreadystatechange = function (e) {
// 根据就绪码判断响应是否完成
if (e.target.readyState === 4) {
// 根据状态码判断成功失败
if (e.target.status === 200) {
resolved(e.target.responseText);
}else{
rejected('响应出错! 错误码: '+e.target.status);
}
}
};
});
}

function getXHR() {
if (window.XMLHttpRequest) {
return new window.XMLHttpRequest;
} else {
// 兼容IE浏览器低版本
new window.AtiveXObject('Microsoft.XMLHTTP');
}
}

注册里面调用封装的ajaxPromise

var param = {method:'get',url:'/checkuser?username='+userInput.value};
ajaxPromise(param).then(function(data){
var jsonObj = JSON.parse(data);
if(jsonObj.code === 1){
isCheckSucess = false;
span.style.color = 'red';
span.innerHTML = jsonObj.msg;
}else{
isCheckSucess = true;
span.innerHTML='';
}
}).catch(function(err){
console.log(err);
});
}

fetch方法的使用

var promise = fetch('/checkuser?username='+userInput.value);
promise.then(function(res){
if(res.ok){
return res.json(); // 将响应内容流转为json对象，以promise形式返回
}else{
// 失败处理
return Promise.reject('响应出错 :'+res.status +' '+res.statusText);
}
}).then(function(data){
// console.log('data :'+JSON.stringify(data));
// var jsonObj = JSON.parse(data);
if(data.code === 1){
isCheckSucess = false;
span.style.color = 'red';
span.innerHTML = data.msg;
}else{
isCheckSucess = true;
span.innerHTML='';
}
}).catch(function(err){
console.log(err);
});

}