vue2 封装 ajax插件

作者: yancolin | 来源:发表于2018-05-10 14:19 被阅读24次

vue2 封装 ajax插件
以Toast为例玩一玩Vue3
ajax函数封装
Ajax上
ajax: 封装
Jquery Ajax 封装
原生 js 封装 ajax的两种方式（get,post）
2019-04-28
原生js封装AJAX
原生js封装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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack App</title>
    <link rel="stylesheet" href="/dist/main.css">
</head>
<body>
<div id="app">
    Hello World
</div>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

创建 index.vue

<template>
    <div>
        点击发送请求：
        <button @click="sendAjax"></button>
    </div>
</template>
<script>
    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);
            }
        }
    }
</script>