请老师帮忙查看错误

一只少年 2022-01-24

源自：Ajax&Fetch 与跨域请求 6-6 封装Ajax-5

收起

1回答

好帮手慕慕子 2022-01-24 13:11:43

同学你好，截图中的报错显示是找不到constants.js文件，建议同学检查下文件名和引入该文件的路径书写是否正确。

如果还有问题，可以将你写的相关代码以及文件夹目录截图粘贴过来（代码不要截图），老师帮助查看下，祝学习愉快~

收起回答

提问者一只少年 #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,get,getJSON,post}from './ajax/index.js';
const url='https://www.imooc.com/api/http/search/suggest?words=js';
const xhr=ajax(url,{
method:'POST',
params:{username:'alex'},
data:{
age:18
},
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>
defaults.js：
//常量
import { HTTP_GET ,CONTENT_TYPE_FORM_URLENCODED} from "./constants";
//默认参数
const DEFAULTS={
method:'GET',
//请求头携带的数据
params:null,
// params:{
// username:'alex',
// age:18
// }
// username=alex&age=18
data:null,
// data:{
// username:'alex',
// age:18
// }
//data:FormData数据

contentType:CONTENT_TYPE_FORM_URLENCODED,
responseType:'',
timeoutTime:0,
withCredentials:false,

//方法
success(){},
httpCodeError(){},
error(){},
abort(){},
timeout(){}
};
export default DEFAULTS;
utils.js：
//工具函数

//数据序列化成urlencoded格式的字符串
const serialize=param=>{
const results=[];
for(const [key,value] of Object.entries
(param)){
results.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
}
// ['username=alex','age=18' ]
return results.join('&')
};

//数据序列化成JSON格式的字符串
const serializeJSON=param=>{
return JSON.stringify(param)
}

//给URL添加参数
//www.imooc.com?words=js&
const addURLData=(url,data)=>{
if(!data)return '';

const mark=url.includes('?')?'&':'?';
return `${mark}${data}`;
};
export{serialize,addURLData,serializeJSON}

2022-01-24 13:16:27
提问者一只少年 #2

utils.js:
//工具函数

//数据序列化成urlencoded格式的字符串
const serialize=param=>{
const results=[];
for(const [key,value] of Object.entries
(param)){
results.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
}
// ['username=alex','age=18' ]
return results.join('&')
};

//数据序列化成JSON格式的字符串
const serializeJSON=param=>{
return JSON.stringify(param)
}

//给URL添加参数
//www.imooc.com?words=js&
const addURLData=(url,data)=>{
if(!data)return '';

const mark=url.includes('?')?'&':'?';
return `${mark}${data}`;
};
export{serialize,addURLData,serializeJSON}
constants.js:
//常量
export const HTTP_GET='GET';
export const CONTENT_TYPE_FORM_URLENCODED="application/x-www-form-urlencoded";
export const CONTENT_TYPE_JSON="application/json";
index.js:
import Ajax from './ajax.js';

const ajax=(url,options)=>{
return new Ajax(url,options).getXHR();
};
const get=(url,options)=>{
return ajax(url,{...options,method:'GET'});
};
const getJSON=(url,options)=>{
return ajax(url,{...options,method:'GET',responseType:'json'});
};
const post=(url,options)=>{
return ajax(url,{...options,method:'GET'});
}

export {ajax,get,getJSON,post};

2022-01-24 13:17:44
提问者一只少年 #3

ajax.js:
//常量
import { HTTP_GET,
CONTENT_TYPE_FORM_URLENCODED,
CONTENT_TYPE_JSON
} from "./constants";

//工具函数
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();

//设置超时
this.setTimeout();

//发送请求
this.sendData();

}

//绑定响应事件处理程序
bindEvents(){
const xhr=this.xhr;
const {success,httpCodeError,error,abort,timeout}=this.options;

//load
xhr.addEventListener=(
'load',
()=>{
if (this.ok()) {
success(xhr.response,xhr);
}else{
httpCodeError(xhr.status,xhr);
}
},
false
);

//error
//请求遇到错误时，将触发error事件
xhr.addEventListener=(
'error',
()=>{
error(xhr);
},
false
);

//abort
//请求遇到错误时，将触发error事件
xhr.addEventListener=(
'abort',
()=>{
abort(xhr);
},
false
);

//timeout
//请求遇到错误时，将触发error事件
xhr.addEventListener=(
'timeout',
()=>{
timeout(xhr);
},
false
);
}

//检测响应的HTTP状态码是否正常
ok(){
const xhr=this.xhr;
return(xhr.status >= 200 && xhr.status < 300) || xhr.status === 304;
}

//在地址上添加数据
addParam(){
const{params}=this.options;

if(!params)return '';
return addURLData(this.url,serialize(params));
}

//设置responseType
setResponseType(){
this.xhr.setResponseType=this.options.responseType
}

//设置跨域是否携带Cookie
setCookie(){
if( this.xhr.withCredentials){
this.xhr.withCredentials=true;
}

}

//设置超时
setTimeout(){
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;

2022-01-24 13:18:36