有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法

方法一,在单个页面内使用

封装的代码如下:

 beforeCreate () {
this.$http = (() => {
let createFetch = (type, url, params) => {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4){
if(xhr.status === 200){
var res = xhr.responseText;
try {
res = JSON.parse(xhr.responseText)
} catch (e) {}
resolve(res)
} else {
reject(xhr.responseText)
}
}
}
url += url.includes('?') ? '&' : '?' if (type === 'GET') {
let serialArr = []
Object.keys(params).forEach(v => {
serialArr.push(`${v}=${params[v]}`)
})
url += serialArr.join('&')
}
xhr.withCredentials = true; //支持跨域发送cookies
xhr.open(type, url, true);
xhr.send(type === 'GET' ? null : params);
})
}
return {
get: (...args) => createFetch("GET", args[0], args[1]),
post: (...args) => createFetch("POST", args[0], args[1])
}
})()
}

使用的代码如下:

this.$http.get('http://123.103.9.204:6058/official/rest/document/wenku/1/3293036/groupList', {pageSize: '1', pageSize: 30, groupType: 0}).then((res)=>{
if(res.flag == 0){
this.requestData = res.data
}
})

方法二,全局注册

封装的方法如下:

export default
{
install(Vue)
{
Vue.prototype.$http=function(options){
/*将数据转化为字符串*/
var strData=function(data){
var dataStr="";
for(var key in data){
dataStr += key+'='+data[key]+'&';
}
dataStr = dataStr && dataStr.slice(0,-1);
return dataStr;
};
/*创建 XMLHttpRequest 对象*/
var createXHR=function(){
var xhr;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}
else {// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr
};
/*向服务器发送请求*/
var open=function(xhr,type,url,async){
xhr.open(type,url,async);
};
var send=function(xhr,msg){
xhr.send(msg);
};
var setHeaders=function(xhr,headers){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
if(!headers){
return false;
}
for(var key in headers){
xhr.setRequestHeader(key,headers[key]);
}
}
var request=function(xhr,opts){
if(opts.type==="GET"){
open(xhr,opts.type,opts.url+'?'+strData(opts.data),opts.async);
send(xhr,null);
}
else if(opts.type==="POST"){
open(xhr,opts.type,opts.url,opts.async);
if(opts.headers){
setHeaders(xhr,opts.headers);
}
send(xhr,strData(opts.data));
}
};
return new Promise((resolve,reject)=>{
if(!options || typeof options != 'object'){
reject(new Error("参数错误,请传入对象参数!"));
return false;
}
if(!options.url){
reject(new Error("url不能为空"));
return false;
}
options.type = options.type?options.type.toUpperCase():'GET';
options.async = (options.async && options.async === false)?false:true;
options.dataType = options.dataType || "json";
options.data = options.data || {};
options.headers = options.headers || {};
var dataStr=strData(options.data);
/*创建 XMLHttpRequest 对象*/
var xhr=createXHR();
/*创建服务器返回响应后执行操作函数*/
xhr.onreadystatechange=function(){
var responseData;
if(xhr.readyState == 4){
switch (xhr.status){
case 200:
switch (options.dataType){
case "xml":
responseData=xhr.responseXML;
break;
case "text":
responseData = xhr.responseText;
break;
case "json":
responseData = JSON.parse(xhr.responseText);
break;
}
resolve(responseData);
default:
reject(new Error("这里做错误处理"));
}
}
};
/*向服务器发送请求*/
request(xhr,options);
})
};
Vue.prototype.$post=function(options){
options.type='post';
return this.$http(options);
};
Vue.prototype.$get=function(options){
options.type='get';
return this.$http(options);
};
}
}
import Vue from 'vue'
import App from './App.vue'
import router from './router' import Install from './install/index.js'
// 这里全局安装
Vue.use(Install) new Vue({
el: '#app',
router,
render: h => h(App)
})

使用的代码如下:

            var reuestData = {
url: "http://123.103.9.204:6058/official/rest/document/wenku/1/3293036/groupList",
data: {pageSize: '1', pageSize: 30, groupType: 0}
}
this.$get(reuestData).then((res)=>{
if(res.flag == 0) {
this.requestData = res.data
}
})

两种方法的比较:

方法一的每个页面要想使用, 都需要写相关的代码,而且由于使用了匿名函数立即执行,如果函数内部有错误,不好调试

方法二使用了全局注册,只要在main.js 注册了全局都可以使用。

具体的代码可以看这里:https://github.com/YalongYan/vue-practice/tree/master/vue-native-ajax

vue实践系列请看这里:https://github.com/YalongYan/vue-practice

vue实践---vue结合 promise 封装原生ajax的更多相关文章

  1. 在vue项目中使用自己封装的ajax

    在 src 目录下新建 vue.extend.js ,内容如下: export default { install(Vue) { Vue.prototype.$http=function(option ...

  2. vue实践---vue动态加载组件

    开发中遇到要加载10个或者更多的,类型相同的组件时,如果用普通的 import 引入组件,components注册组件,代码显得太啰嗦了,这时候就需要用到 require.context 动态加载这些 ...

  3. vue实践---vue配合express实现请求数据mock

    mock数据是前端比较常见的技术,这里介绍下vue配合express 实现请求数据mock. 第一步: 安装 express :  npm install express -D 第二步: 简历需要mo ...

  4. vue实践---vue不依赖外部资源实现简单多语

    vue使用多语,最常见的就是 vue-i18n, 但是如果开发中的多语很少,比如就不到10个多语,这样就没必要引入vue-i18n了, 引入了反正导致代码体积大了,这时候单纯用vue实现多语就是比较好 ...

  5. js 封装原生ajax

    jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...

  6. 原生ajax解析&封装原生ajax函数

    前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...

  7. 封装原生Ajax

    var Chef = { createAjax:function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("m ...

  8. promise封装的ajax

    var  myNewAjax=function(url){ return new Promise(function(resolve,reject){ var xhr = new XMLHttpRequ ...

  9. ES6封装原生ajax请求

    http (data) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.onrea ...

随机推荐

  1. malloc,free和new,delete之间的区别

    1.malloc free 是c语言里面的,不过在c++中也能使用,这个只是申请的一块内存,一般不能申请对象的内存空间:2.new delete,是c++的,申请的也是一块内存,只是这个可以申请对象. ...

  2. java GC optimization, G1GC

    引用    http://www.avricot.com/blog/?post/2010/05/03/Get-started-with-java-JVM-memory-(heap%2C-stack%2 ...

  3. ASP.NET MVC学习---(二)EF文件结构

    之前已经简单的介绍过ORM框架和EF 也了解了EF的种种优点 那么这个EF到底长啥样子都还没见过呢 别着急 接下来,科学教育频道--走近科学 带你走进EF的内心世界~ 那么接下来就是~ 等等等等... ...

  4. bind域名dns解析及主从服务的配置

    bind域名dns解析及主从服务的配置 1.dns解析介绍     人们习惯记忆域名,但机器间互相只认IP地址,域名与IP地址之间是多对一的关系,一个ip地址不一定只对应一个域名,且一个域名只可以对应 ...

  5. 转:Eclipse自动补全功能轻松设置

    Eclipse自动补全功能轻松设置 || 不需要修改编辑任何文件 2012-03-08 21:29:02|  分类: Java |  标签:eclipse  自动补全  设置  |举报|字号 订阅   ...

  6. .net平台 基于 XMPP协议的即时消息服务端简单实现

    .net平台 基于 XMPP协议的即时消息服务端简单实现 昨天抽空学习了一下XMPP,在网上找了好久,中文的资料太少了所以做这个简单的例子,今天才完成.公司也正在准备开发基于XMPP协议的即时通讯工具 ...

  7. Win7系统管理员设置了系统策略,禁止进行此安装,怎么办

    系统管理员设置了系统策略,禁止进行此安装,怎么办 最佳答案 尝试方法一:   windows开始菜单,运行里面输入gpedit.msc打开组策略,   在"计算机配置"→管理模板→ ...

  8. Python 实现指定目录下 删除指定大小的文件

    import os, sys from stat import * BIG_FILE_THRESHOLD = 6000L #1000000L dict1 = {} # dict2 = {} # def ...

  9. include file与jsp:include 的区别

    <%include   file="a.jsp"%>静态包含,先加入再编译,就是在编译的时候将a.jsp的代码加入进来在编译,只会生成一个servlet文件,而且不同a ...

  10. springboot缓存及连接池配置

    参见https://coding.imooc.com/lesson/117.html#mid=6412 1.springboot的springweb自己默认以及配置好了缓存,只需要在主文件(XxxAp ...