ajax分装过程

过程"/>

ajax分装过程

ajax分装过程

一 ajax原生四步

// 创建xhrHttp实例
let xhrHttp
if(window.XMLHttpRequest){//创建Ajax对象 获取浏览器内部的一个XMLHttpRequest对象,创建该对象.(非IE6)xhrHttp= new XMLHttpRequest();
}else{//ie6xhrHttp= new ActiveXObject("Microsoft.XMLHTTP");             
}// 监听请求和响应状态
xhrHttp.onreadyStatechange=function(){// 响应成功 xhrHttp.readyState 状态为4 xhrHttp.status=200if(xhrHttp.readyState==4 && xhrHttp.status==200){let responseText=xhrHttp.responseText;responseText=JSON.parse(responseText)// 进行dom操作等// ......}
}// 与服务器创建连接
let url='http://127.0.0.1:8080/v1/rols';
let type // 'get' || 'post'
// true代表支持异步执行
xhrHttp.open(type,url,true);// 发送请求
if(type==='post'){xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}
xhrHttp.send(data) // post请求
// xhrHttp.send() // get请求

二 分装

此处分装转载
归纳了原创的代码

在utils文件夹下创建ajax.js
模拟jQuery方法封装

let $ = {ajax:function(options = {}){    //将请求的数据以对象的形式传进来var {type = "get",url="",data="",async=true,dataType="text",success}=options;//将数据解析 默认get方法请求 默认异步操作 默认文本类型text success 回调函数var xhr = new XMLHttpRequest();if(typeof data == "object"){   //优化 如果传入的data数据是对象 那么用对象的方法将他拼接起来var str = "";for(var key in data){    //for in 方法循环遍历键名str += key + "=" + data[key] + "&";       //将data数据拼接起来 但最后会有一个&符号       }data = str.substring(0,str.length-1);   // 裁剪掉最后一个字符串 也就是&}if(type=="get"){   //如果请求的方法是getif(data){     //如果存在数据 那么将数据放在URL后面xhr.open("get",url+"?"+data,async);               }else{      //如果不存在数据 那么就不添加数据          xhr.open("get",url,async);}xhr.send();}else if(type=="post"){     //如果是post请求xhr.open("post",url,async);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   //添加这行代码xhr.send(data);   //将已经遍历好的数据发送}xhr.onreadystatechange = function (){if(xhr.readyState==4&&xhr.status==200){var result = xhr.responseText;if(dataType == "json"){    // 如果是json数据类型  将他解析result = JSON.parse(xhr.responseText);}if(success){			// 如果存在回调函数 那么便执行这个回调函数success(result);}}}    }
}// type写在最后面的目的是可以省略不写 默认值是get 如果放在最前面 函数调用会调用URL当成type
export function request(url, params, type = "get") {return new Promise(function (resolve, reject) {$.ajax({type,url,data: {...params},dataType: "json",success: function (result) {  // result  形式参数  表示请求成功时返回的数据resolve(result);}})})
}

在api的模块化js请求接口中引入ajax.js

import {request} from '@/utils/ajax.js'
export function login(params){return request("../php/login.php", params, "post");
}