没看到FormData
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
import { ajax, get, getJSON, post } from './module/index.js';
const url = 'https://www.imooc.com/api/http/json/search/suggest?words=js';
const xhr = ajax(url, {
method:'POST',
params:{
username:'alex'
},
data:{
age:19
},
responseType:'json',
success(response){
console.log(response);
},
httpCodeError(err){
console.log('http code error',err);
},
error(xhr){
console.log('error',xhr);
},
abort(xhr){
console.log('abort',xhr);
},
timeout(xhr){
console.log('timeout',xhr);
},
})
</script>
</body>
</html>// 常量
import { HTTP_GET, CONTENT_TYPE_FORM_URLENCODED, CONTENT_TYPE_JSON } from './constants.js';
// 工具
import { serialize, addURLData, serializeJSON } from "./utils.js";
// 默认参数
import DEFAULTS from "./defaults.js";
// AJAX类
class Ajax {
constructor(url, options) {
this.url = url;
this.options = Object.assign({}, DEFAULTS, options);
// 初始化
this.init();
};
// 初始化
init() {
const xhr = new XMLHttpRequest();
this.xhr = xhr;
this.bindEvents();
xhr.open(this.options.method, this.url + this.addParam(), true);
// 设置responseType
this.setResponseType();
// 设置跨域是否携带Cookie
this.setCookie();
// 设置timeoutTime
this.settimeoutTime();
// 发送请求
this.sendData();
};
// 处理事件响应函数
bindEvents() {
const xhr = this.xhr;
const { success, httpCodeError, error, abort, timeout } = this.options;
xhr.addEventListener('load', () => {
if (this.httpCodeOK()) {
success(xhr.response, xhr);
} else {
httpCodeError(xhr.status, xhr);
}
}, false);
// error
xhr.addEventListener('error', () => {
error(xhr);
}, false);
// abort
xhr.addEventListener('abort', () => {
abort(xhr);
}, false);
// timeout
xhr.addEventListener('timeout', () => {
timeout(xhr);
}, false);
};
// 检测http状态码是否正常
httpCodeOK() {
const xhr = this.xhr;
return (xhr.status >= 200 && xhr.status < 300) || xhr.status === 305;
}
addParam() {
const { params } = this.options;
if (!params) {
return '';
}
return addURLData(this.url, serialize(params));
const url = this.url;
}
setResponseType() {
this.xhr.responseType = this.options.responseType;
}
setCookie() {
if (this.options.withCredentials) {
this.xhr.withCredentials = true;
}
}
settimeoutTime() {
const { timeoutTime } = this.options;
if (timeoutTime > 0) {
this.xhr.timeout = timeoutTime;
}
}
sendData() {
const xhr = this.xhr;
if (!this.isSendData()) {
return xhr.send(null);
}
let resultData = null;
const {data}=this.options;
if (this.isFormData) {
resultData = data;
} else if (this.isFormURL()) {
this.setCountentType(CONTENT_TYPE_FORM_URLENCODED);
resultData = serialize(data);
} else if (this.isJSONdata()) {
this.setCountentType(CONTENT_TYPE_JSON);
resultData = serializeJSON(data);
} else {
this.setCountentType();
resultData = data;
}
xhr.send(resultData);
};
// 是否需要send发送数据
isSendData() {
const { data, method } = this.options;
if (!data) return false;
if (method.toLowerCase() === HTTP_GET.toLowerCase()) return false;
return true;
}
ifFormData() {
return this.options.data instanceof FormData;
}
isFormURL() {
return this.options.contentType.toLowerCase().includes(CONTENT_TYPE_FORM_URLENCODED);
}
isJSONdata() {
return this.options.contentType.toLowerCase().includes(CONTENT_TYPE_JSON);
}
setCountentType(CountentType = this.options.contentType) {
if (!CountentType) {
return;
} else {
this.xhr.setRequestHeader('Content-Type', this.contentType);
}
}
getXHR() {
return this.xhr;
}
}
export default Ajax;相关截图：
12
收起
正在回答
2回答
同学你好，设置请求头这里书写有误，建议修改：
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星