在vue项目中使用自己封装的ajax
在 src 目录下新建 vue.extend.js ,内容如下:
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(,-);
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 == ){
switch (xhr.status){
case :
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);
};
}
}
在 main.js 中引入vue.extend.js
import utils from './vue.extend'
Vue.use(utils);
然后就可以通过this.$http、this.$get、this.$post使用啦
this.$http({
url:"https://api.api68.com/klsf/getLotteryInfo.do?issue=&lotCode=10009",
type:"get"
})
.then(function(res){
console.log("$http",res);
console.log(this.msg);
}.bind(this))
.catch(function(err){
console.log(err)
}.bind(this))
this.$get({
url:"https://api.api68.com/klsf/getLotteryInfo.do?issue=&lotCode=10009"
})
.then(function(res){
console.log("$get",res);
console.log(this.msg);
}.bind(this))
.catch(function(err){
console.log(err)
}.bind(this))
this.$post({
url:"https://api.api68.com/klsf/getLotteryInfo.do",
data:{
issue:"",
lotCode:""
}
})
.then(function(res){
console.log("$post",res);
console.log(this.msg);
}.bind(this))
.catch(function(err){
console.log(err)
}.bind(this))
在vue项目中使用自己封装的ajax的更多相关文章
- vue项目中的函数封装
项目中一般都会有fun.js这类的文件,里面有各种的如转换时间格式的,处理转换的等等函数方法. 其实经常用到的去获取基本数据的接口也可以封装成一个方法,方便复用. 如上面所标,获取列表数据之前需要先获 ...
- vue项目中axios的封装和使用
一.axios的功能特点 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 支持多种请求 ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- vue项目中 axios 和Vue-axios的关系
文章收集于:https://segmentfault.com/q/1010000010812113 在vue项目中,会经常看到如下代码: 今天看到有些项目是这样写的,就有点看不懂了. ----解 ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
- 在vue项目中的axios使用配置记录
默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...
- 如何在Vue项目中给路由跳转加上进度条
1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...
- Vue项目中的http请求统一管理
module.exports = { dev: { // Paths assetsSubDirectory: '/', assetsPublicPath: '/', proxyTable: { /op ...
随机推荐
- 修改mysql max_allowed_packet 配置
1:当前默认配置 mysql> show VARIABLES like '%max_allowed_packet%';+--------------------------+---------- ...
- dell服务器在bios中指定raid5的热备盘
一.创建raid5 二.指定热备盘 选择第15块磁盘作为上面创建的raid5的热备盘 选中 选中我们刚创建的raid5,点击OK
- Oracle中恢复drop掉的表中的数据
今天同事不小心把生产上的一张表直接drop掉了,没有做备份,哥们慌的一匹,来找我这个小白来帮忙解决,于是心血来潮简单总结一下. 其实在oralce中,用drop删掉一张表,其实不会真正的删除,只是把表 ...
- IDEA 开发插件
Alibaba Java Code Guidelines 阿里巴巴推出的一款Java代码规约扫描插件,按照<阿里巴巴Java开发手册>规定对代码风格以及质量进行实时检测.约束.强推.ecl ...
- Spring mvc请求处理流程详解(一)之视图解析
本文链接:https://blog.csdn.net/lchpersonal521/article/details/53112728 前言 Spring mvc框架相信很多人都很熟悉了,关于这方面 ...
- @PropertySouce注解 读取 properties文件
https://www.cnblogs.com/whx7762/p/7885735.html 1.@ProtertySource @PropertySouce是spring3.1开始引入的基于java ...
- Spring AOP 创建Advice 定义pointcut、advisor
前面定义的advice都是直接植入到代理接口的执行之前和之后,或者在异常发生时,事实上,还可以对植入的时机定义的更细. Pointcut定义了advice的应用时机,在Spring中pointcutA ...
- Spring-Cloud之Ribbon负载均衡-3
一.负载均衡是指将负载分摊到多个执行单元上,常见的负载均衡有两种方式.一种是独立进程单元,通过负载均衡策略,将请求转发到不同的执行单元上,例如 Ngnix .另一种是将负载均衡逻辑以代码的形式封装到服 ...
- flickity:支持触摸滑动,响应迅速的幻灯片轮播插件
简介:flickity 是一个支持触摸,响应迅速的幻灯片轮播插件.支持环绕滑动.自由滑动.组滑动.自动播放.延迟加载.视差滑动.图片滑动.兼容IE10+, Android 4+, Safari for ...
- 1.java小作业-计算1到100的整合-指定输入多少行输出就打印多少行-打印24小时60分钟每一分钟-重载基础练习-面向java编程初学者
可能有和我一样刚开始学习java的小伙伴们, 可以或多或少了解一点别的语言知识,我就是中途转过来的, 明白一点,关键不在语言本身····· 所以面对初学者来说,基础要学好, 下面列举几个没什么难度的小 ...