js XMLHttpRequest自定义ajax请求配置

注意：未经允许不可私自转载，违者必究

项目GitHub地址：https://github.com/zhouwei1994/nativeCase.git

HTTP请求配置代码

在项目src/config目录下创建 response.js，代码如下：

本封装方法适合所有js语言的项目，本方法只封装了get、post，其他请求请自行封装

export default class request {
  constructor(options) {
    //请求公共地址
    this.baseUrl = options.baseUrl || "";
    //最大请求时间 0 是不限制时间
    this.timeout = options.timeout || 0;
    //默认请求头
    this.headers = options.headers || {};
    //默认配置
    //是否提示--默认提示
    this.isPrompt = true;
    //是否显示请求动画
    this.load = true;
    //是否使用处理数据模板
    this.isFactory = true;
  }
  //post请求
  post(url = '', data = {}, options = {}) {
    let requestInfo = this.getDefault(url, options);
    let requestData = JSON.stringify(data);
    return new Promise((resolve, reject) => {
      this.getRequest("POST", requestInfo, requestData, (state, response) => {
        //是否用外部的数据处理方法
        if (state && requestInfo.isFactory && this.dataFactory) {
          //数据处理
          var factoryInfo = this.dataFactory(requestInfo, response);
          factoryInfo.success ? resolve(factoryInfo.result) : reject(factoryInfo.result);
        } else {
          state ? resolve(response) : reject(response);
        }
      });
    });
  }
  //get请求
  get(url = '', data = {}, options = {}) {
    let requestInfo = this.getDefault(url, options);
    let dataStr = '';
    Object.keys(data).forEach(key => {
      dataStr += key + '=' + data[key] + '&';
    });
    //匹配最后一个&并去除
    if (dataStr !== '') {
      dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
    }
    requestInfo.httpUrl = requestInfo.httpUrl + '?' + dataStr;
    return new Promise((resolve, reject) => {
      this.getRequest("GET", requestInfo, '', (state, response) => {
        //是否用外部的数据处理方法
        if (state && requestInfo.isFactory && this.dataFactory) {
          //数据处理
          var factoryInfo = this.dataFactory(requestInfo, response);
          factoryInfo.success ? resolve(factoryInfo.result) : reject(factoryInfo.result);
        } else {
          state ? resolve(response) : reject(response);
        }
      });
    });
  }

  // 获取默认信息
  getDefault(url, options) {
    //判断url是不是链接
    var urlType = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~/])+$/.test(url);
    let config = Object.assign({
      isPrompt: this.isPrompt,
      load: this.load,
      isFactory: this.isFactory
    }, options);
    //请求地址
    config.httpUrl = urlType ? url : this.baseUrl + url;
    //请求头
    config.headers = Object.assign(this.headers, options.headers);
    return config;
  }
  //请求方法
  getRequest(ajaxType, options, data, callback) {
    let requestObj;
    if (window.XMLHttpRequest) {
      requestObj = new XMLHttpRequest();
    }
    //请求前回调
    if (this.requestStart) {
      options.method = ajaxType;
      options.data = data;
      var requestStart = this.requestStart(options);
      if (typeof requestStart == "object") {
        options.data = requestStart.data;
        options.headers = requestStart.headers;
        options.isPrompt = requestStart.isPrompt;
        options.load = requestStart.load;
        options.isFactory = requestStart.isFactory;
      }
    }
    //设置请求时间，最低5秒
    if (options.timeout > 2000) {
      //设置xhr请求的超时时间
      requestObj.timeout = options.timeout;
    }
    requestObj.open(ajaxType, options.httpUrl, true);
    //加入请求头
    Object.keys(options.headers).forEach(key => {
      if (options.headers[key]) {
        requestObj.setRequestHeader(key, options.headers[key]);
      }
    });
    requestObj.send(options.data);
    requestObj.onreadystatechange = () => {
      if (requestObj.readyState == 4) {
        //请求完成回调
        this.requestEnd && this.requestEnd(options, requestObj);
        if (requestObj.status === 200) {
          let result = requestObj.response;
          if (typeof result !== 'object') {
            result = JSON.parse(result);
          }
          callback(true, result);
        } else {
          console.error(requestObj.response);
          callback(false, requestObj.response);
        }
      }
    }
  }
}

创建response对象和请求动画配置

在项目src/config目录下创建 fetch.js，代码如下：

import store from '@/config/store';
import router from '@/router/index';
import { prompt, $alert, getBrowser } from '@/utils/utils';
//引入请求方法
import request from "@/utils/request";
//创建request对象
var http = new request({
  //定义请求地址公共部分(必填)
  baseUrl: config.baseUrl,
  //设置请求头（默认为{}）
  headers: {
    'Content-Type': 'application/json',
    'project_token': config.projectToken
  }
});
//请求开始回调
http.requestStart = function (options) {
  //判断当前接口是否需要加载动画
  if (options.load) {
    //打开加载动画
    store.commit('setLoading', true);
  }
  if (store.state.userInfo.token) {
    options.headers["user_token"] = store.state.userInfo.token;
  }
  console.log("请求开始", options);
  return options;
};
//请求结束
http.requestEnd = function (options, resolve) {
  console.log("请求结束", '\n', JSON.parse(resolve.response));
  //判断当前接口是否需要加载动画
  if (options.load) {
    store.commit('setLoading', false);
  }
}
//所有接口数据处理（这里是我们公司的java后台的数据结构，使用的小伙伴各自按照实际情况处理）
http.dataFactory = function (options, resolve) {
  console.log("所有接口数据处理");
  //设置回调默认值
  var callback = {
    success: false,
    result: "未定义返回值"
  };
  //判断数据是否请求成功
  if (resolve.success) {
    callback.success = true;
    callback.result = resolve.data;
  } else if (parseInt(resolve.code) == 1000) { //code == 1000 是用户未登录
    $alert("您还未登录，请先登录", {
      type: 1,
      confirmText: "去登录",
      cancelText: "再等等"
    }, res => {
      if (res.confirm) {
        router.push("/");
      }
    });
  } else { //其他错误提示
    if (options.isPrompt) {
      prompt(resolve.info);
    }
    callback.result = resolve.info;
  }
  return callback;
}
//返回请求对象
export default http;

数据请求

import $http from './../../config/fetch';

$http.get('aid/region',{pid:0})
    .then(function (response) {
        //请求成功
        console.log(response);
    }).catch(function (error) {
        //请求失败
        console.log(error);
    });

$http.post('aid/region',{pid:0})
    .then(function (response) {
        //请求成功
        console.log(response);
    }).catch(function (error) {
        //请求失败
        console.log(error);
    });
/* 
* url 类型：字符串
* 例如：“aid/region” 会把在公共设置的baseUrl加入在此url前面
* 例如：“http://www.xxxxx.com/aid/region” 公共设置的baseUrl不会加入在此url前面
* 
* data 类型：json
* 例如：{
*   pid：0
* }
*/
$http.post(url, data, {
    isPrompt: true,//（默认 true 说明：本接口抛出的错误是否提示）
    load: true,//（默认 true 说明：本接口是否提示加载动画）
    headers: { //默认 无 说明：请求头
        'Content-Type': 'application/json'
    },
    isFactory: true //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数奖失去作用）
}).then(function (response) {
    //请求成功
    console.log(response);
}).catch(function (error) {
    //请求失败
    console.log(error);
});

Loading、Toast组件请查看下面教程：

教程：https://blog.csdn.net/weixin_40614372/article/details/86506678

项目GitHub地址：https://github.com/zhouwei1994/nativeCase.git