vue2.0+ajax封装,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

点击发送请求：

export default{

methods:{

sendAjax(){

var options = {};

options.url = "note.txt";

// var data = options.data = {}; 这里可以data中写入参数

options.type = 'get';

options.success = (message) => {

console.log(message);

};

this.$ajax.ajax(options);

}

}

}