网站经营网络备案信息管理系统,wordpress 提示要安装,自个网站,专业北京翻译公司代码下载
前后端交互模式
接口调用方式#xff1a;原生ajax、基于jQuery的ajax、fetch、axios。
URL 地址格式
传统形式的 URL 格式#xff1a;schema://host:port/path?query#fragment
schema#xff1a;协议。例如http、https、ftp等host#xff1a;域名或者IP地址…代码下载
前后端交互模式
接口调用方式原生ajax、基于jQuery的ajax、fetch、axios。
URL 地址格式
传统形式的 URL 格式schema://host:port/path?query#fragment
schema协议。例如http、https、ftp等host域名或者IP地址port端口, http默认端口80可以省略path路径, 例如/abc/a/b/cquery 查询参数例如 unamelisiage12fragment 锚点哈希Hash用于定位页面的某个位置
Restful 形式的 URL HTTP请求方式GET 查询、POST 添加、PUT 修改、DELETE 删除。
Promise
官网地址
JavaScript的执行环境是单线程常见的异步调用定时任务、ajax、事件函数。多次异步调用的结果顺序不确定异步调用结果如果存在依赖需要嵌套。 // 定时任务let v 1;setTimeout(() {v 2;}, 1000);console.log(v: , v);// 多次异步调用$.get(http:localhost/data1, function(data) {console.log(data: , data);});$.get(http:localhost/data2, function(data) {console.log(data: , data);});$.get(http:localhost/data3, function(data) {console.log(data: , data);});// 嵌套调用$.get(http:localhost/data1, function(data) {console.log(data: , data);$.get(http:localhost/data2, function(data) {console.log(data: , data);$.get(http:localhost/data3, function(data) {console.log(data: , data);});});});Promise 是异步编程的一种解决方案从语法上讲Promise是一个对象从它可以获取异步操作的消息。使用 Promise 主要有以下好处
可以避免多层异步调用嵌套问题(回调地狱)Promise 对象提供了简洁的API使得控制异步操作更加容易
Promise 基本用法
实例化 Promise 对象构造函数中传递函数该函数用于处理异步任务resolve 和 reject 两个参数用于处理成功和失败两种情况并通过 p.then 获取处理结果 var p new Promise(function(resolve, reject){// 成功时调用 resolve()// 失败时调用 reject()});p.then(funciton(ret){// 从resolve得到正常结果}, function(ret){// 从reject得到错误信息});let p new Promise(function(resolve, reject) {setTimeout(() {let f true;if (f) {resolve(正常);} else {reject(出错啦);}}, 1000);
});
p.then(function(data) {console.log(data: , data);
}, function(info) {console.log(info: , info);
});基于Promise处理Ajax请求
处理原生Ajax let p new Promise(function(resolve, reject) {let xhr new XMLHttpRequest();xhr.open(GET, http:localhost/data1);xhr.send();xhr.onreadystatechange function() {if (xhr.readyState 4) {if (xhr.status 200) {resolve(xhr.responseText);} else {reject(出错啦);}}};});p.then(function(data) {console.log(data: , data);}, function(info) {console.log(info: , info);})发送多次ajax请求 function queryData(url) {let p new Promise(function(resolve, reject) {let xhr new XMLHttpRequest();xhr.open(GET, url);xhr.send();xhr.onreadystatechange function() {if (xhr.readyState 4) {if (xhr.status 200) {resolve(xhr.responseText);} else {reject(出错啦);}}};});return p;}queryData(http:localhost/data1).then(function(data) {console.log(data: , data);return queryData(http:localhost/data2);}).then(function(data) {console.log(data: , data);return queryData(http:localhost/data3);}).then(function(data) {console.log(data: , data);});then参数中的函数返回值
返回 Promise 实例对象返回的该实例对象会调用下一个 then返回普通值返回的普通值会直接传递给下一个 then通过 then 参数中的第一个函数的参数接收该值 function createPromise(flag) {let q new Promise(function(resolve, reject) {setTimeout(() {if (flag) {resolve(成功);} else {reject(失败);}}, 1000);});return q;}createPromise(false).then(function(data) {console.log(data: , data);return data;}, function(info) {console.log(info: , info);return info;}).then(function(data) {console.log(--data: , data, --);}, function(info) {console.log(--info: , info, --);})// 打印结果// info: 失败// --data: 失败 --Promise常用的API
p.then() 得到异步任务的正确结果也可以得到异步任务的正确结果和异常信息。p.catch() 获取异常信息。p.finally() 成功与否都会执行(尚且不是正式标准)。Promise.all() 接受一个数组作参数数组中的对象均为promise实例(如果不是一个 promise该项会被用 Promise.resolve 转换为一个promise)。并发处理多个异步任务所有任务都执行完成才能得到结果(全部任务成功才算成功只要有一个任务异常就只能得到此任务的异常信息)。Promise.race() 方法同样接受一个数组作参数。并发处理多个异步任务只要有一个任务完成就能得到结果。 function queryData(flag, index) {let p new Promise(function(resolve, reject) {setTimeout(() {if (flag) {resolve(成功- index);} else {reject(失败- index);}}, 1000);});return p;}queryData(true, 1).then(function(data){console.log(then success data: , data);}).catch(function(info) {console.log(catch info: , info);}).finally(function() {console.log(finally);});// 打印结果// then success data: 成功-1// finallyqueryData(false, 2).then(function(data){console.log(then success data: , data);}).catch(function(info) {console.log(catch info: , info);}).finally(function() {console.log(finally);});// 打印结果// catch info: 失败-2// finallyPromise.all([queryData(true, 3), queryData(false, 4), queryData(false, 5)]).then(function(result) {console.log(result: , result);}, function(info) {console.log(error: , info);});// 打印结果// error: 失败-4Promise.race([queryData(true, 6), queryData(false, 7), queryData(true, 8)]).then(function(result) {console.log(result: , result);}, function(info) {console.log(error: , info);});// 打印结果// result: 成功-6fetch
官网地址
Fetch API是新的ajax解决方案更加简单地获取数据功能更强大、更灵活。语法结构 fetch(url, options).then(fn1).then(fn1).catch(fn2)Fetch会返回Promise所以我们可以使用 then 拿到请求成功的结果。fetch不是ajax的进一步封装而是原生js基于Promise实现没有使用XMLHttpRequest对象。 fetch(http://localhost/data1).then(function(response) {// response 是响应体console.log(response: , response);// text()方法属于fetchAPI的一部分它返回一个Promise实例对象用于获取后台返回的数据let r response.text();console.log(text: , r);return r;}).then(function(data) {// 这里得到的才是最终数据console.log(data: , data);});// 打印结果// response: Response {type: cors, url: http://localhost/data1, redirected: false, status: 200, ok: true, …}// text: Promise {[[PromiseState]]: pending, [[PromiseResult]]: undefined}// data: data1fetch 请求参数常用配置选项
method(String): HTTP请求方法默认为GET (GET、POST、PUT、DELETE)body(String): HTTP的请求参数headers(Object): HTTP的请求头默认为{}
fetch 响应数据格式
text()将返回体处理成字符串类型json()返回结果和 JSON.parse(responseText)一样 // getfetch(http://localhost/fdata?id1).then(function(res) {return res.text();}).then(function(data) {console.log(data: , data);});// get 动态参数fetch(http://localhost/fdata/2, {method: get}).then(function(res) {return res.text();}).then(function(data) {console.log(data: , data);});// post url-encoded 参数fetch(http://localhost/fdata, {method: post,body: uname张三password123456,headers: {Content-Type: application/x-www-form-urlencoded}}).then(function(res) {return res.text();}).then(function(data) {console.log(data: , data);});// post josn 参数fetch(http://localhost/fdata, {method: post,body: JSON.stringify({uname: 李四,password: 123456}),headers: {Content-Type: application/json}}).then(function(res) {return res.json();}).then(function(data) {console.log(data: , data);});// deletefetch(http://localhost/fdata/3, {method: delete}).then(function(res) {return res.text();}).then(function(data) {console.log(data: , data);});// putfetch(http://localhost/fdata/4, {method: put,body: JSON.stringify({uname: 王五,password: 123456}),headers: {Content-Type: application/json}}).then(function(res) {return res.json();}).then(function(data) {console.log(data: , data);});axios
axios官网是一个基于Promise 用于浏览器和 node.js 的 HTTP 客户端。它具有以下特征
支持浏览器和 node.js支持 promise能拦截请求和响应自动转换 JSON 数据
基本用法
axios.get(‘/adata).then(ret{// data属性名称是固定的用于获取后台响应的数据console.log(ret.data)})axios 的响应结果的主要属性
data 实际响应回来的数据headers 响应头信息status 响应状态码statusText 响应状态信息
axios 的参数传递 // getaxios.get(http://localhost/data?id1).then(function(res) {console.log(res.data);});// get 动态参数axios.get(http://localhost/data/2).then(function(res) {console.log(res.data);});// get params 形式参数axios.get(http://localhost/data, {params: {id: 3}}).then(function(res) {console.log(res.data);});// post 通过 URLSearchParams 传递url-encoded参数let params new URLSearchParams();params.append(uname, 张三);params.append(password, 123);console.log(params);axios.post(http://localhost/data, params).then(function(res) {console.log(res.data);});// post json参数axios.post(http://localhost/data, {uname: 李四,password: 123}).then(function(res) {console.log(res.data);});// delete 与 get 类似axios.delete(http://localhost/data?id4).then(function(res) {console.log(res.data);});axios.delete(http://localhost/data/5).then(function(res) {console.log(res.data);});axios.delete(http://localhost/data, {params: {id: 6}}).then(function(res) {console.log(res.data);});// put 与 post 类似axios.put(http://localhost/data/7, {uname: 王五,password: 123}).then(function(res) {console.log(res.data);});axios 还可以如此传递参数
axios({method: 请求类型,url: 请求的URL地址, data: { /* POST数据 */ },params: { /* GET参数 */ }
}).then(callback)axios 的全局配置
axios.defaults.timeout 3000; // 超时时间axios.defaults.baseURL ‘http://localhost:3000’; // 默认地址axios.defaults.headers[‘mytoken’] ‘aqwerwqwerqwer2ewrwe23eresdf23’; //设置请求头axios.defaults.headers.common[‘Authorization’] AUTH_TOKEN;axios.defaults.headers.post[‘Content-Type’] ‘application/x-www-form-urlencoded’; // 配置公共的 post 的 Content-Type axios.defaults.baseURL http://localhost;axios.defaults.headers[mytoken] zhaoliu;axios.get(data-json).then(function(res) {console.log(res.data);});axios 拦截器
请求拦截器请求拦截器的作用是在请求发送前进行一些操作例如在每个请求体里加上token统一做了处理如果以后要改也非常容易响应拦截器响应拦截器的作用是在接收到响应后进行一些操作例如在服务器返回登录状态失效需要重新登录的时候跳转到登录页 axios.interceptors.request.use(function(config) {console.log(config: , config);console.log(url: , config.url);if (config.url.indexOf(/data-json1) ! -1) {config.headers.mytoken xxxx;}return config});axios.interceptors.response.use(function(res) {console.log(response: , res);if (res.request.responseURL.indexOf(/data-json1) ! -1) {return res.data;}return res;}, function(err) {console.log(err: , err);});axios.get(http://localhost/data-json1).then(function(res) {console.log(data: , res);});接口调用-async/await用法
async/await是ES7引入的新语法它的实现是基于Promise可以更加方便的进行异步操作
async 关键字用于函数上任何一个 async 函数都会隐式返回一个 promiseawait 关键字用于 async 函数当中await函数不能单独使用await可以得到异步的结果也可以直接跟一个 Promise实例对象 async function queryData() {var ret await axios.get(http://localhost/data/1)return ret.data;}queryData().then(function(data) {console.log(data: , data);});async function queryData() {var ret await new Promise(function(resolve, reject){setTimeout(() {resolve(100);}, 1000);});return ret;}queryData().then(function(res) {console.log(res: , res);});async/await 让异步代码看起来、表现起来更像同步代码多个异步请求的场景 async function queryData() {var info await axios.get(http://localhost/data/1);var ret await axios.get(http://localhost/data?id info.data.id);return ret.data;}queryData().then(function(data) {console.log(data: , data);})综合案例——基于后台接口的图书管理案例
axios 全局配置以及配置响应拦截器 // 全局配置 默认地址axios.defaults.baseURL http://localhost:80/;// 响应拦截器axios.interceptors.response.use(function(res) {return res.data;});加载图书列表
使用 async、await 封装 queryData 函数获取后台数据 queryData: async function() {this.books await axios.get(books)}删除 mounted 钩子函数中的假数据调用获取后台接口数据的函数 queryData mounted: function() {// 该生命周期钩子函数被触发的时候模板已经可以使用// 一般此时用于获取后台数据然后把数据填充到模板this.queryData();}其他功能实现
验证图书名是否可用 watch: {bname: async function(n) {if (n.length 0) {let ret await axios.get(books/check/ n);console.log(ret: , ret);this.confirm !ret.status;} else {this.confirm false;}}}去编辑图书 editHandle: async function(m) {let ret await axios.get(books/ m.id);if (ret ! null) {this.bid ret.id;this.bname ret.name;this.flag false;}}添加、编辑图书 addHandle: async function() {console.log(addHandle);if (this.flag) { // 添加let ret await axios.post(books, {name: this.bname})// 成功重新加载数据if (ret.code 200) {this.queryData();}} else { // 编辑let ret await axios.put(books, {id: this.bid,name: this.bname});// 成功重新加载数据if (ret.code 200) {this.queryData();}this.flag true;}this.bid ;this.bname ;}删除图书 deleteHandle: async function(m) {let ret await axios.delete(books/ m.id);// 成功重新加载数据if (ret.code 200) {this.queryData();}}图书管理后台实现
新建后台项目文件夹 books, 安装 express、cros 这两个包。
新建 handle.js 文件处理接口
// 处理文件
const path require(path);
const fs require(fs);
const data require(./data.json);// 生成图书id
function generateBookId() {return Math.max.apply(null, data.map(function(v) {return v.id;})) 1;
}
// 写入数据
function writeData(res) {fs.writeFile(path.join(__dirname, data.json), JSON.stringify(data), function(err) {if (err) {res.json({code: 500,err: err});} else {res.json({code: 200,msg: 成功});}})
}
// 获取图书
function books(req, res) {res.send(data);
}
// 添加图书
function addBook(req, res) {const body req.body;const book {id: generateBookId(),name: body.name,date: new Date()};console.log(book: , book);data.unshift(book);writeData(res);
}
// 获取单个图书
function oneBook(req, res) {console.log(params: , req.params);const id req.params.id;let book null;data.some(function(v, i, a) {console.log(v: , v);if (v.id id) {book v;return true;}});console.log(book: , book);res.json(book);
}
// 编辑图书
function editBook(req, res) {const body req.body;console.log(body: , body);data.some(function(v, i, a) {if (body.id v.id) {v.name body.name;}});writeData(res);
}
// 删除图书
function deleteBook(req, res) {console.log(params: , req.params);const id req.params.id;data.some((v, i, a) {if (v.id id) {data.splice(i, 1);}});writeData(res);
}
// 验证图书名是否存在
function checkName(req, res) {const name req.params.name;let result false;data.some(function(v, i, a) {result name v.name;return result;});res.json({status: result});
}module.exports {books,addBook,oneBook,editBook,deleteBook,checkName
}新建 router.js 文件处理路由
// 路由模块
let express require(express);
let router express.Router();
let handle require(./handle);// 获取图书
router.get(/books, handle.books);// 添加图书
router.post(/books, handle.addBook);// 获取单个图书
router.get(/books/:id, handle.oneBook);// 编辑图书
router.put(/books, handle.editBook);// 删除图书
router.delete(/books/:id, handle.deleteBook);// 验证图书名是否存在
router.get(/books/check/:name, handle.checkName);module.exports router;新建 index.js 文件处理服务
// 导入 express
const express require(express);// 创建服务器
const app express();// 配置 cors 跨域中间件
const cors require(cors);
app.use(cors());
// 配置解析 application/x-www-form-urlencoded 格式的表单数据的中间件
app.use(express.urlencoded({ extended: false }));
// 配置解析表单中的 JSON 格式的数据的中间件
app.use(express.json());// 启动静态资源服务
app.use(express.static(public))// 配置路由
let router require(./router);
app.use(router);// 指定端口启动服务器
app.listen(80, function(){console.log(server running at http://127.0.0.1:80);
});附录
附录一
示例 node 后台代码
// 导入模块
const express require(express);
// 创建服务器
const app express();// 配置跨域中间件
app.use(function(req, res, next) {res.header(Access-Control-Allow-Origin, *);res.header(Access-Control-Allow-Methods, PUT, GET, POST, DELETE, OPTIONS);res.header(Access-Control-Allow-Headers, Content-Type);next();
});
// 配置自定义请求头
app.use(/data-json, function(req, res, next) {res.header(Access-Control-Allow-Headers, mytoken);next();
});
app.use(/data-json1, function(req, res, next) {res.header(Access-Control-Allow-Headers, mytoken);next();
});// 配置数据解析中间件
app.use(express.json());
app.use(express.urlencoded({ extended: false }));// 监听请求
app.get(/data1, function(req, res) {console.log(----data1----);res.send(data1);
});
app.get(/data2, function(req, res) {console.log(----data2----);res.send(data2);
});
app.get(/data3, function(req, res) {console.log(----data3----);res.send(data3);
});app.get(/data, function(req, res) {console.log(req.query);res.send({method: get,...req.query});
});
app.get(/data/:id, function(req, res) {console.log(req.params);res.send({method: get,...req.params});
});
app.post(/data, function(req, res) {console.log(req.body);res.send({method: post,...req.body});
});
app.delete(/data, function(req, res) {console.log(req.params);res.send({method: delete,...req.query});
});
app.delete(/data/:id, function(req, res) {console.log(req.params);res.send({method: delete,...req.params});
});
app.put(/data/:id, function(req, res) {console.log(req.params);console.log(req.body);res.send({method: put,id: req.params.id,...req.body});
});app.get(/data-json, (req, res) {console.log(req.headers);res.json({uname: 赵六,age: 12});
});
app.get(/data-json1, (req, res) {console.log(req.headers);res.json({uname: 赵六,age: 12});
});// 调用 app.listen(端口号, 启动成功后的回调函数)启动服务器
app.listen(80, function() {console.log(server running at http://127.0.0.1:80);
});
