在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 ...
随机推荐
- C#中的ref和out与SQL中的output
什么时候会需要使用ref和out 有时,我们会需要获取某个值在方法中的运行状态,根据定义的方法,我们仅仅能够获得一个返回值,但是,有时我们也许想获取多个值,通过返回值就不能返回这样的信息,我们可以通过 ...
- 定时杀死mysql中sleep的进程
#!/bin/sh date=`date +%Y%m%d\[%H:%M:%S]` n=`mysqladmin -uroot -p** processlist | grep -i sleep | wc ...
- bridge和原生交互的简单用法
首先获取当前环境是ios还是Android var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u ...
- mavn jar包依赖冲突解决
背景:使用maven很方便,但是引入冲突也很常见.后果很严重,各种不明实体找不到,所以需要对jar包的依赖有一个清晰的认识. 查看冲突 参考:用dependency:tree查看maven引入jar包 ...
- PHP Imagick文字加阴影(外发光)
PHP Imagick文字加阴影(外发光)<pre>$canvas = new \Imagick(); $canvas->newImage(500, 200, 'white'); $ ...
- Locust 性能测试工具安装使用说明
1. 介绍 它是一个开源性能测试工具.使用 Python 代码来定义用户行为.用它可以模拟百万计的并发用户访问你的系统. 性能工具对比 LoadRunner 是非常有名的商业性能测试工具,功能 ...
- python教程:用简单的Python编写Web应用程序
python现在已经成为很多程序员关注的编程语言之一,很多程序员也都开始弄python编程,并且很多时候都会用自己的操作来选择,而现在不管是程序员还是少儿编程,都会有python这门课,今天就和大家分 ...
- (1)ASP.NET Core 应用启动Startup类简介
1.前言 Core与早期版本的 ASP.NET 对比,配置应用程序的方式的 Global.asax.FilterConfig.cs和RouteConfig.cs 都被Program.cs 和 Star ...
- C#中Chart的简单使用(柱状图和折线图)
首先创建一个windows窗体应用程序,在工具箱—>数据中拖拽一个Chart控件,设置ChartArea背景色为黄色,Legend背景色为绿色,三个Series,Name属性分别为1,2,3,添 ...
- k8s--yml文件