老师，非常麻烦您帮我检查下
问题描述：
老师，我这边封装好后，报了如下错误，尝试重复敲了两遍，还是没有找出问题，您能帮我检查下么
相关代码：ajax.js
import DEFAULTS from "./DEFAULTS";
// 引入工具函数
import { serilize, serilizeJson } from "./utils";
class Ajax {
constructor(url, options) {
this.url = url;
this.options = Object.assign({}, DEFAULTS, this.options);
// 初始化
this.init();
}
init() {
const xhr = new XMLHttpRequest();
this.xhr = xhr;
// 绑定事件处理函数
this.bindEvents();
xhr.open(this.options.methods, this.url + this.addParams(), true);
// 设置 responseType
this.setResponseType();
// 设置跨域是否携带 cookie
this.setCookie();
// 设置超时
this.setTimeout();
// 发送数据
this.sendData();
}
// 绑定事件函数
bindEvents() {
const xhr = this.xhr;
const {success, httpCodeError, error, abort} = this.options;
xhr.addEventListener('load', () => {
if(this.isOk()){
success(xhr.response, xhr);
}else {
httpCodeError(xhr.status, xhr);
}
}, false);
xhr.addEventListener('error', () => {
error(xhr);
}, false);
xhr.addEventListener('abort', () => {
abort(xhr);
}, false);
xhr.addEventListener('timeout', () => {
setTimeout(xhr);
}, false);
}
// 检测 HTTP 状态码是否正常
isOk() {
const xhr = this.xhr;
return (xhr.status >= 200 || xhr.status < 300) || xhr === 304;
}
// 在地址上添加数据
addParams() {
const {params} = this.options;
if(!params) return '';
return addURLData(this.url, serilize(params));
}
// 设置 responseType
setResponseType() {
this.xhr.responseType = this.options.responseType;
}
// 设置跨域是否携带 cookie
setCookie() {
this.xhr.withCredentials = this.options.withCredentials;
}
// 设置超时
setTimeout() {
this.xhr.timeout = this.options.timeout;
}
// 发送数据
sendData() {
const {data} = this.options;
const xhr = this.xhr;
if(!this.isSendData()) return xhr.send(null);
let results = null;
// 发送 FormData 数据
if(this.isFormData()) {
results = data;
}
// 发送 x-www-form-urlencoded 数据
else if(this.isUrlEncoded()) {
results = serilize(data);
}
// 发送 Json 数据
else if(this.isJson()) {
results = serilizeJson(data);
}
// 发送其它类型 data 数据
else {
results = data;
}
xhr.send(results);
}
// 是否需要再请求体中发送数据
isSendData() {
const {data} = this.options;
const xhr = this.xhr;
if(this.options.method.toLowerCase() === 'get') return false;
if(!data) return false;
return true;
}
// 是否是 FormData 数据
isFormData() {
return this.options.data instanceof FormData;
}
// 是否是 x-www-form-urlencoded 数据
isUrlEncoded() {
return this.options.contentType.toLowerCase().includes(CONTENT_TYPE_FORM_URLENCODED);
}
// 暴露xhr
getXHR() {
return this.xhr;
}
}
export default Ajax;相关代码：defaults.js
import {CONTENT_TYPE_FORM_URLENCODED, CONTENT_TYPE_JSON, HTTP_METHOD} from './constants.js'
const DEFAULTS = {
method: HTTP_METHOD,
params: null,
// params: {
// username: 'alex',
// age: 18
// }
data: null,
// data: {
// username: 'alex',
// age: 18
// },
// data: FormData 数据
contentType: CONTENT_TYPE_FORM_URLENCODED,
responseType: '',
timeoutTime: 0,
withCradentials: false,
// 方法
success() {},
httpCodeError() {},
error() {},
abort() {},
timeout() {}
}
export default DEFAULTS;相关代码：utils.js
export const serilize = (params) => {
const results = [];
for(const [key, value] of Object.entries(params)) {
results.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
return results.join('&');
}
}
export const serilizeJson = (data) => {
return JSON.stringify(data);
}相关代码：1.html
<!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} from './js/index.js';
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = ajax(url, {
params: {
username: 'hejianwu'
},
data: {
age: 18
},
responseType: 'json',
error(xhr) {
console.log('请求错误');
console.log(xhr);
}
})
</script>
</body>
</html>相关截图：
14
收起
正在回答
1回答
同学你好，提供的代码中，存在如下错误：
1、js文件中引入其他js文件时，“.js"这个后缀名不能省略，如下写法是错的：
建议同学把所有引入文件中的“.js"补全：
2、ajax.js中，有如下书写错误：
a、如下位置书写不正确：
应该是调用我们传入的timeout方法：
b、如下位置书写错误：
修改如下：
c、addURLData方法没有定义：
建议在utils.js中，添加该方法，并引入：
d、isJson方法也没有定义就使用了：
建议补全。
e、如下变量没有定义：
建议补全。
同学可以下载源码并对照源码，从头到尾检查一下自己的代码：
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星