站长图库向大家介绍了promise,参数解构,封装ajax请求等相关知识,希望对您有所帮助
这篇文章主要介绍了利用promise及参数解构封装ajax请求的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
1、前端代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body><script>/** * type: get/post * url: http://localhost:3000 http://localhost:3000/details http://localhost:3000/users * data: lid=5 / uname=lili&upwd=123456 * dataType: '' / 'json', 如果服务端返回的是json格式字符串，就通过dataType通知ajax函数自动转换为对象 **/ajax({ type: 'get', url: 'http://localhost:3000', dataType: 'json'})// data 不写在解构时值默认为 data: undefinedajax({ type: 'get', url: 'http://localhost:3000/details', data: 'lid=0', dataType: 'json'})ajax({ type: 'post', url: 'http://localhost:3000/users', data: 'uname=lili&upwd=123456',}).then(function(res){ alert(res)})// dataType 不写在解构时值默认为 dataType: undefinedfunction ajax({type, url,data, dataType}){ return new Promise(function(open){ var xhr = new XMLHttpRequest() xhr.onreadystatechange = function(){ if(xhr.readyState === 4 && xhr.status === 200){ if(dataType === 'json'){ var res = JSON.parse(xhr.responseText) } else { var res = xhr.responseText } console.log(res) open(res) } } if(type === 'get' && data !== undefined){ url += `?${data}` } xhr.open(type, url, true) xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') if (type === 'get') { xhr.send() } else { xhr.send(data) } })}</script></body></html>另：ajax实际代码实现如下
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body><script>var xhr = new XMLHttpRequest()xhr.onreadystatechange = function(){ if(xhr.readyState === 4 && xhr.status === 200){ console.log(xhr.responseText) }}xhr.open('get', 'http://localhost:3000', true)xhr.send()</script></body></html>2、后端代码
1) 创建一个后端项目
2) 在routes下创建index.js,users.js，代码如下
// index.jsvar express = require('express');var router = express.Router();/* GET home page. */var products = [ { lid:1, pname:'笔记本', price:3400 }, { lid:2, pname:'手机', price:5400 }, { lid:3, pname:'iPad', price:6400 }]router.get('/', function(req, res, next) { res.send(products)});router.get('/details', function(req, res, next){ var lid = req.query.lid res.send(products[lid])})module.exports = router;3、注：
为避免跨域，可将前端代码和后端同时放在一个项目内，使用同一地址，再发送请求调取接口。