在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(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);
        };
    }
}

 

 

 

在 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:"10009" } }) .then(function(res){ console.log("$post",res); console.log(this.msg); }.bind(this)) .catch(function(err){ console.log(err) }.bind(this))