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 = url
function ajax(options = {}) {
// 这里options参数选择了对象:对象可以不用考虑参数的顺序
// throw new Error(): 创建一个错误信息对象,并抛出(显示在控制台)
// 1.1 请求地址是必填项
if (!options.url) throw new Error('请求地址是必填项')
// 1.2 请求方式 这个地方可以是undefined, 也可以是'GET'或'POST'
if (!(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请求码等于200
if (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()