ic手机网站开发平台,中英文网站程序,网站的功能规范,网站首页静态化代码Promise封装原生ajax
1.node的内置模块url, http
2.Promise封装原生ajax
01-node的内置模块
# url: 操作网址
let url require(url)
url.parse(网址, [布尔值: 决定是否将查询字符串转换为对象格式])#xff1a; 将网址解析成对象# http: 创建本地服务器
let http requi…Promise封装原生ajax
1.node的内置模块url, http
2.Promise封装原生ajax
01-node的内置模块
# url: 操作网址
let url require(url)
url.parse(网址, [布尔值: 决定是否将查询字符串转换为对象格式]) 将网址解析成对象# http: 创建本地服务器
let http require(http)let server http.createServer(function (req, res) {// req: 前端提交的数据// res: 后端响应的内容console.log(服务器被访问了一次);
})
server.listen(8888, console.log(服务器启动成功))02-Promise封装ajax【面试题】
/* 参数1. 请求地址,url: 必填2. 请求方式,method: 选填 默认get请求3. 提交的参数data: 选填 默认值 4. post的请求头 headers选填 默认值 {content-type, application/x-www-form-urlencoded}返回值 必须 返回的内容可以是回调函数, 可能会造成回调地狱 建议选择的是返回Promise可以支持async/await函数封装的方法相同部分放到函数体内不同部分传参搞定函数封装的原则尽可能的让程序的兼容性更强 参数是否齐全 参数的格式是否正确*/// 将对象转换为查询字符串
function queryStringify(data) {let str for (let key in data) {str ${key}${data[key]}}return str.slice(0, -1)
}function createAjax(url) {var BaseURL urlfunction ajax(options {}) {// 这里options参数选择了对象对象可以不用考虑参数的顺序// throw new Error(): 创建一个错误信息对象并抛出显示在控制台// 1.1 请求地址是必填项if (!options.url) throw new Error(请求地址是必填项)// 1.2 请求方式 这个地方可以是undefined, 也可以是GET或POSTif (!(options.method undefined || /^(GET|POST)$/i.test(options.method))) {throw new Error(目前仅支持GET或POST敬请期待更多方式)}// 1.3 提交的参数 这个地方也可以undefined也可以是字符串也可以是对象if (!(options.data undefined || typeof options.data string || options.data.constructor Object)) {throw new Error(支持的数据类型可以是字符串或者对象)}// 1.4 post请求头可以是undefined, 也可以是表单格式提交if (/^POST$/i.test(options.method)) {if (!(options.headers undefined || options.headers[content-type] application/x-www-form-urlencoded || options.headers[content-type] application/json)) {throw new Error(post请求必须设置请求头)}}// 如果options里面的参数不包含请求方式和提交参数就要提供默认值let _default {url: BaseURL options.url,method: options.method || GET,data: options.data || ,headers: options.headers || { content-type: application/x-www-form-urlencoded }}// 提交的参数的格式可以是对象形式就需要将对象先转换成查询字符串再做拼接if (_default.data.constructor Object) _default.data queryStringify(_default.data)// 注意如果请求方式是get,并且需要携带参数就需要把参数拼接在url地址的后面if (/^GET$/i.test(_default.method) _default.data) _default.url ? _default.data// 注意发送了请求之后希望可以接收到响应的数据这里就使用了Promise, 再将结果resolve出去即可let p new Promise((resolve, reject) {// 2. 发起ajax请求// 2.1 创建一个实例对象负责发起请求和接收响应的数据let xhr new XMLHttpRequest()// 2.2 配置请求方式和请求地址xhr.open(_default.method, _default.url)// 2.3 设置请求头信息// xhr.setRequestHeader(content-type, application/x-www-form-urlencoded)if (/^POST$/i.test(_default.method)) xhr.setRequestHeader(content-type, _default.headers[content-type])// // 2.4 发送请求xhr.send(/^POST$/i.test(_default.method) _default.data)// 2.4 监听请求状态xhr.onreadystatechange function () {// 如果请求的状态码等于4 并且 http请求码等于200if (xhr.readyState 4 xhr.status 200) {let res JSON.parse(xhr.responseText)// console.log(res);resolve(res)}}})return p}return ajax
}# 方法调用async function fun() {let ajax createAjax(http://115.159.153.85:8001)let r1 await ajax({url: /getTest,// method: POST,// headers: { content-type: application/json },data: {name: xdj,age: 18}})let r2 await ajax({url: /postTest,method: POST,// headers: { content-type: application/json },data: {name: r1.msg.slice(0, 3),age: 18}})}
fun()
