vue2 封装 ajax插件

根目录下新建一个vue-ajax.js文件:

const install = function(Vue){
    const Ajax = new Vue({
        methods:{
            ajax(options={}){
                options.type = (options.type || 'GET').toUpperCase();

                let data = [];
                for( let i in options.data ){
                    data.push(encodeURIComponent(i)+ '=' + encodeURIComponent(options.data[i]));
                }
                data = data.join('&');

                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");
                }

                xhr.onreadystatechange = function(){
                    if(xhr.readyState ===4){
                        const status = xhr.status;
                        if(status >= 200 && status < 300){
                            options.success && options.success(JSON.parse(xhr.responseText),xhr.responseXML);
                        } else {
                            options.error && options.error(status);
                        }
                    }
                };
                if( options.type === 'GET' ){
                    xhr.open('GET',options.url + '?' + data,true);
                    xhr.send(null);
                } else if( options.type === 'POST' ){
                    xhr.open('POST',options.url,true);
                    xhr.setRequestHeader(
                        'Content-Type',
                        'application/x-www-form-urlencoded'
                    );
                    xhr.send(data);
                }
            }
        }
    });
    Vue.prototype.$ajax = Ajax;
}
export default install;

main.js 中引入该文件

// 导入Vue框架
import Vue from 'vue';
// 导入index.vue 组件
import Index from "./index.vue";
// 导入vue-ajax插件
import VueAjax from './vue-ajax';
// 使用ajax 插件
Vue.use(VueAjax);
// 创建 vue 根实例
new Vue({
  el: '#app',
  render: h => {
      return h(Index)
  }
});

创建index.html




    
    webpack App
    


Hello World

创建 index.vue


你可能感兴趣的:(vue2 封装 ajax插件)