老师，非常麻烦您帮我检查下

问题描述：

老师，我这边封装好后，报了如下错误，尝试重复敲了两遍，还是没有找出问题，您能帮我检查下么

相关代码：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>

相关截图：

帅得无心敲代码 2021-12-08

源自：Ajax&Fetch 与跨域请求 6-7 使用Promise改造封装好的Ajax

收起

1回答

好帮手慕久久回答被采纳获得+3积分 2021-12-09 10:26:15

同学你好，提供的代码中，存在如下错误：

1、js文件中引入其他js文件时，“.js"这个后缀名不能省略，如下写法是错的：

建议同学把所有引入文件中的“.js"补全：

2、ajax.js中，有如下书写错误：

a、如下位置书写不正确：

应该是调用我们传入的timeout方法：

b、如下位置书写错误：

修改如下：

c、addURLData方法没有定义：

建议在utils.js中，添加该方法，并引入：

d、isJson方法也没有定义就使用了：

建议补全。

e、如下变量没有定义：

建议补全。

同学可以下载源码并对照源码，从头到尾检查一下自己的代码：

祝学习愉快！

收起回答

帅得无心敲代码提问者 #1

老师，我按照这个检查之后，报了如下错误：
请问，是这个url地址接口的原因么

2021-12-09 21:08:56
好帮手慕久久回复提问者帅得无心敲代码 #2

同学你好，不是接口问题，应该还是代码问题。老师测试，接口是正常的：
建议同学新建一个问题，把全部代码粘贴出来（之前提供的代码不全），老师们帮你检查一下。

2021-12-10 10:35:21
帅得无心敲代码提问者回复好帮手慕久久 #3

好的，非常感谢您

2021-12-10 16:08:45