用promise封装ajax_vue实践---vue结合 promise 封装原生ajax
有时候不想使用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 注册了全局都可以使用。
用promise封装ajax_vue实践---vue结合 promise 封装原生ajax相关推荐
- promise的应用和在VUE中使用axios发送AJAX请求服务器
promise 用promise对函数封装: 原来的代码: <!DOCTYPE html> <html> <head><title>vue demo&l ...
- vue中Promise的用法
简介 promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个还好,如果是一个请求回来的数据还要被其他请求调用,不断地嵌套,可想而知,代码看起来是很乱的,promis ...
- 在Vue中Promise.all的使用
一.Promise.all 简述 举例 实战 一.Promise.all 简述 Promise.all可以将多个Promise实例包装成一个新的Promise实例.同时,成功和失败的返回值是不同的,成 ...
- Promise 原理解析与实现(遵循Promise/A+规范)
1.什么是Promise? Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/ ...
- vue项目请求封装;axios封装使用
vue项目,封装axios请求方式和响应状态码:以及接口的api封装: 目录结构: 1.具体在src/utils/request.js下封装axios: ①引入axios和router ②引入elem ...
- vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
- 浅析 uniapp(Vue) 的接口封装方法
浅析 uniapp(Vue) 的接口封装方法 本文将详细讲解封装思路,通过对接口请求进行封装,实现接口引入即用,减少了请求复杂的属性参数,更加关注数据与业务本身. config - 请求地址及相关参数 ...
- js之- 简解Promise的resolved,rejected,Promise.all 和Promise.race(知识记录)
1- Promise的三种状态: 1- Pending(等待,未完成,进行中) 2- Resolved(成功) 3- Rejected(失败) 2- Promise的三种状态关系变化只有两种: 1- ...
- 我以为我很懂Promise,直到我开始实现Promise/A+规范
我一度以为自己很懂Promise,直到前段时间尝试去实现Promise/A+规范时,才发现自己对Promise的理解还过于浅薄.在我按照Promise/A+规范去写具体代码实现的过程中,我经历了从&q ...
最新文章
- [Spring 深度解析]第3章 核心容器
- TFIDF的简单解释
- 域控制器建立以及一般配置
- boost::mpl::min和boost::mpl::max相关的测试程序
- ExtJS学习:MVC模式案例(三)
- 【跃迁之路】【440天】刻意练习系列199(2018.04.21)
- Apache POI操作Excel导出JAVABEAN对象方法
- Unity网格合并_材质合并
- java里面什么时候环境变量_Java的环境变量什么时候需要设置?
- 后宫宛如传服务器维护,合服丨《后宫宛如传》合服公告
- 选择日期保存后日期变成前一天(avue date)
- 学习Java之前的一些话
- 444 nginx_程序员安全规范:安全无小事,安全防范从nginx配置做起
- .net core精彩实例分享 -- 反射与Composition
- Node.js webpack
- MVC文件上传07-使用客户端jQuery-File-Upload插件和服务端Backload组件裁剪上传图片...
- Spring Boot + WebMagic 实现网页爬虫,写得太好了!
- Vue开源项目汇总(史上最全)
- grid autosport额外内容下载慢_世界土壤数据库(HWSD)全球土壤数据下载处理
- 纯C语言按键驱动,使用软件查询实现
热门文章
- CRM WebClient UI里product search上下文节点渲染逻辑
- SAP ABAP实用技巧介绍系列之使用代码获得user的SAP lock信息
- 自开发Web应用和SAP Customer Data Cloud Identity服务的集成
- 打开Excel显示:新建EXCEL文件格式和扩展名不匹配(原因+解决办法)
- 华为的型号命名规则_电力电缆产品的型号命名规则
- AC自动机build时的一点小优化
- python读取math_怎么使用python安装math库?怎么用?
- 鸿蒙安卓数据互通吗,假如鸿蒙与安卓之间不能够实现游戏账号互通,你还会为其买单吗?...
- 2013江苏计算机二级vfp试题,2013年计算机二级VFP上机试题及答案解析51
- git fock的子项目从上游仓库(源项目)同步更新