在 src 目录下新建 vue.extend.js ,内容如下:

  1. export default
  2. {
  3. install(Vue)
  4. {
  5. Vue.prototype.$http=function(options){
  6. /*将数据转化为字符串*/
  7. var strData=function(data){
  8. var dataStr="";
  9. for(var key in data){
  10. dataStr += key+'='+data[key]+'&';
  11. }
  12. dataStr = dataStr && dataStr.slice(,-);
  13. return dataStr;
  14. };
  15. /*创建 XMLHttpRequest 对象*/
  16. var createXHR=function(){
  17. var xhr;
  18. if (window.XMLHttpRequest)
  19. {// code for IE7+, Firefox, Chrome, Opera, Safari
  20. xhr=new XMLHttpRequest();
  21. }
  22. else
  23. {// code for IE6, IE5
  24. xhr=new ActiveXObject("Microsoft.XMLHTTP");
  25. }
  26. return xhr
  27. };
  28. /*向服务器发送请求*/
  29. var open=function(xhr,type,url,async){
  30. xhr.open(type,url,async);
  31. };
  32. var send=function(xhr,msg){
  33. xhr.send(msg);
  34. };
  35. var setHeaders=function(xhr,headers){
  36. xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  37. if(!headers){
  38. return false;
  39. }
  40. for(var key in headers){
  41. xhr.setRequestHeader(key,headers[key]);
  42. }
  43. }
  44. var request=function(xhr,opts){
  45. if(opts.type==="GET"){
  46. open(xhr,opts.type,opts.url+'?'+strData(opts.data),opts.async);
  47. send(xhr,null);
  48. }
  49. else if(opts.type==="POST"){
  50. open(xhr,opts.type,opts.url,opts.async);
  51. if(opts.headers){
  52. setHeaders(xhr,opts.headers);
  53. }
  54. send(xhr,strData(opts.data));
  55. }
  56. };
  57. return new Promise((resolve,reject)=>{
  58. if(!options || typeof options != 'object'){
  59. reject(new Error("参数错误,请传入对象参数!"));
  60. return false;
  61. }
  62. if(!options.url){
  63. reject(new Error("url不能为空"));
  64. return false;
  65. }
  66. options.type = options.type?options.type.toUpperCase():'GET';
  67. options.async = (options.async && options.async === false)?false:true;
  68. options.dataType = options.dataType || "json";
  69. options.data = options.data || {};
  70. options.headers = options.headers || {};
  71. var dataStr=strData(options.data);
  72. /*创建 XMLHttpRequest 对象*/
  73. var xhr=createXHR();
  74. /*创建服务器返回响应后执行操作函数*/
  75. xhr.onreadystatechange=function(){
  76. var responseData;
  77. if(xhr.readyState == ){
  78. switch (xhr.status){
  79. case :
  80. switch (options.dataType){
  81. case "xml":
  82. responseData=xhr.responseXML;
  83. break;
  84. case "text":
  85. responseData = xhr.responseText;
  86. break;
  87. case "json":
  88. responseData = JSON.parse(xhr.responseText);
  89. break;
  90. }
  91. resolve(responseData);
  92. default:
  93. reject(new Error("这里做错误处理"));
  94. }
  95. }
  96. };
  97. /*向服务器发送请求*/
  98. request(xhr,options);
  99. })
  100. };
  101. Vue.prototype.$post=function(options){
  102. options.type='post';
  103. return this.$http(options);
  104. };
  105. Vue.prototype.$get=function(options){
  106. options.type='get';
  107. return this.$http(options);
  108. };
  109. }
  110. }

在 main.js 中引入vue.extend.js

  1. import utils from './vue.extend'
  1. Vue.use(utils);

然后就可以通过this.$http、this.$get、this.$post使用啦

  1. this.$http({
  2. url:"https://api.api68.com/klsf/getLotteryInfo.do?issue=&lotCode=10009",
  3. type:"get"
  4. })
  5. .then(function(res){
  6. console.log("$http",res);
  7. console.log(this.msg);
  8. }.bind(this))
  9. .catch(function(err){
  10. console.log(err)
  11. }.bind(this))
  1. this.$get({
  2. url:"https://api.api68.com/klsf/getLotteryInfo.do?issue=&lotCode=10009"
  3. })
  4. .then(function(res){
  5. console.log("$get",res);
  6. console.log(this.msg);
  7. }.bind(this))
  8. .catch(function(err){
  9. console.log(err)
  10. }.bind(this))
  1. this.$post({
  2. url:"https://api.api68.com/klsf/getLotteryInfo.do",
  3. data:{
  4. issue:"",
  5. lotCode:""
  6. }
  7. })
  8. .then(function(res){
  9. console.log("$post",res);
  10. console.log(this.msg);
  11. }.bind(this))
  12. .catch(function(err){
  13. console.log(err)
  14. }.bind(this))

在vue项目中使用自己封装的ajax的更多相关文章

  1. vue项目中的函数封装

    项目中一般都会有fun.js这类的文件,里面有各种的如转换时间格式的,处理转换的等等函数方法. 其实经常用到的去获取基本数据的接口也可以封装成一个方法,方便复用. 如上面所标,获取列表数据之前需要先获 ...

  2. vue项目中axios的封装和使用

    一.axios的功能特点 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 支持多种请求 ...

  3. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  4. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  5. vue项目中 axios 和Vue-axios的关系

    文章收集于:https://segmentfault.com/q/1010000010812113 在vue项目中,会经常看到如下代码:   今天看到有些项目是这样写的,就有点看不懂了.  ----解 ...

  6. Vue项目中使用Vuex + axios发送请求

    本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...

  7. 在vue项目中的axios使用配置记录

    默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...

  8. 如何在Vue项目中给路由跳转加上进度条

    1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...

  9. Vue项目中的http请求统一管理

    module.exports = { dev: { // Paths assetsSubDirectory: '/', assetsPublicPath: '/', proxyTable: { /op ...

随机推荐

  1. C#中的ref和out与SQL中的output

    什么时候会需要使用ref和out 有时,我们会需要获取某个值在方法中的运行状态,根据定义的方法,我们仅仅能够获得一个返回值,但是,有时我们也许想获取多个值,通过返回值就不能返回这样的信息,我们可以通过 ...

  2. 定时杀死mysql中sleep的进程

    #!/bin/sh date=`date +%Y%m%d\[%H:%M:%S]` n=`mysqladmin -uroot -p** processlist | grep -i sleep | wc ...

  3. bridge和原生交互的简单用法

    首先获取当前环境是ios还是Android var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u ...

  4. mavn jar包依赖冲突解决

    背景:使用maven很方便,但是引入冲突也很常见.后果很严重,各种不明实体找不到,所以需要对jar包的依赖有一个清晰的认识. 查看冲突 参考:用dependency:tree查看maven引入jar包 ...

  5. PHP Imagick文字加阴影(外发光)

    PHP Imagick文字加阴影(外发光)<pre>$canvas = new \Imagick(); $canvas->newImage(500, 200, 'white'); $ ...

  6. Locust 性能测试工具安装使用说明

    1. 介绍     它是一个开源性能测试工具.使用 Python 代码来定义用户行为.用它可以模拟百万计的并发用户访问你的系统. 性能工具对比 LoadRunner 是非常有名的商业性能测试工具,功能 ...

  7. python教程:用简单的Python编写Web应用程序

    python现在已经成为很多程序员关注的编程语言之一,很多程序员也都开始弄python编程,并且很多时候都会用自己的操作来选择,而现在不管是程序员还是少儿编程,都会有python这门课,今天就和大家分 ...

  8. (1)ASP.NET Core 应用启动Startup类简介

    1.前言 Core与早期版本的 ASP.NET 对比,配置应用程序的方式的 Global.asax.FilterConfig.cs和RouteConfig.cs 都被Program.cs 和 Star ...

  9. C#中Chart的简单使用(柱状图和折线图)

    首先创建一个windows窗体应用程序,在工具箱—>数据中拖拽一个Chart控件,设置ChartArea背景色为黄色,Legend背景色为绿色,三个Series,Name属性分别为1,2,3,添 ...

  10. k8s--yml文件