精华内容
下载资源
问答
  • 原标题:【VUEVue-Ajax上传组件封装前言:最近在使用vue写页面,所以自动封装了一个ajax封装组件,vue相对来说还是比较简的,只要明白数据绑定是怎么个情况就很好学习了,类似相关的框架有微信小程序也是基于数据...

    原标题:【VUE】Vue-Ajax上传组件封装

    前言:最近在使用vue写页面,所以自动封装了一个ajax封装组件,vue相对来说还是比较简的,只要明白数据绑定是怎么个情况就很好学习了,类似相关的框架有微信小程序也是基于数据绑定的方式。

    代码

    //封装VUE AJAX FILE COMPONENT

    Vue.component('my-file', {

    template: '',

    methods: {

    uploadFile: function () {

    var fd = new FormData();

    fd.append("upload", document.getElementById("file_upload_id").files[0]);

    var xhr = new ();

    xhr.upload.addEventListener("progress", this.uploadProgress, false);

    xhr.addEventListener("load", this.uploadComplete, false);

    xhr.addEventListener("error", this.uploadFailed, false);

    xhr.addEventListener("abort", this.uploadCanceled, false);

    xhr.open("post", "/files");

    xhr.send(fd);

    },

    uploadProgress: function (event) {

    if (event.lengthComputable) {

    var percentComplete = Math.round(event.loaded * 100 / event.total);

    vm.age = percentComplete.toString() + '%';

    }

    else {

    vm.age = 0;

    }

    },

    uploadComplete: function (event) {

    console.log('complete');

    },

    uploadFailed: function (event) {

    console.log('failed');

    },

    uploadCanceled: function (event) {

    console.log('abort');

    }

    }

    });

    var vm = new Vue({

    delimiters: ['[[', ']]'],

    el: '#example-3',

    data: {

    message: "",

    messageArr: [],

    age: ""

    },

    methods: {

    say: function (message) {

    alert(message)

    }

    }

    });

    //注意,vue component 必须在vue对象之前注册

    使用方式

    < my-fiel>< /my-file>

    原生的js-ajax-upload.js

    var ajaxUploadFile = function () {

    var fd = new FormData();

    fd.append("upload", document.getElementById("file_id").files[0]);

    var xhr = new ();

    xhr.upload.addEventListener("progress", uploadProgress, false);

    xhr.addEventListener("load", uploadComplete, false);

    xhr.addEventListener("error", uploadFailed, false);

    xhr.addEventListener("abort", uploadCanceled, false);

    xhr.open("post", "/files");

    xhr.send(fd);

    };

    var uploadProgress = function (event) {

    if (event.lengthComputable) {

    var percentComplete = Math.round(event.loaded * 100 / event.total);

    vm.age = percentComplete.toString() + '%';

    }

    else {

    vm.age = 0;

    }

    };

    var uploadComplete = function (event) {

    console.log('complete');

    };

    var uploadFailed = function (event) {

    console.log('failed');

    };

    var uploadCanceled = function (event) {

    console.log('abort');

    };

    以上的的都是带请求处理的进度条的,大家可以使用uploadProgress里去实现进度条的上传效果返回搜狐,查看更多

    责任编辑:

    展开全文
  • 根目录下新建一个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....

    根目录下新建一个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);

    }

    }

    }

    展开全文
  • 本篇文章给大家带来的内容是关于Vue封装ajax的代码示例详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。HTML文件:Document点击获取信息{{ msg }}var vm=new Vue({el: "#app",data: {msg: "",...

    本篇文章给大家带来的内容是关于Vue封装ajax的代码示例详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    HTML文件:

    Document

    点击获取信息

    {{ msg }}

    var vm=new Vue({

    el: "#app",

    data: {

    msg: "",

    },

    methods: {

    getInfo: function (){

    var self=this;

    this.ajax.get("1.json",{

    tel: 123456,

    address: "杭州"

    },function (data){

    self.msg=data[1].name

    },"json");

    }

    }

    })

    JS文件:/*

    * ajax封装:

    * 1. 引入文件

    * 2. new Vue().ajax.get(url,data,fn,ojson), 或 new Vue().ajax.post(url,data,fn,ojson)

    * url: 需要获取数据的文件地址 (string)

    * data: 需要发送的信息 (可省略) (obj)

    * fn: 获取信息后的回调函数,接收到的返回值为data (function)

    * ojson: 是否需要转换为json格式 (可省略) (设置为 "json")

    *

    * 3. new Vue().ajax.get().cancel(): 取消异步请求

    * 4. new Vue().ajax.json(str): 可转化json格式字符串

    **/

    Vue.prototype.ajax={

    //添加url传送信息

    addUrl: function (url,obj){

    //如果省略url,则为post请求,令obj为url,令url为null

    if(arguments.length==1){

    obj=url;

    url=null;

    }

    //url不为空(get请求: 设置url信息)

    if(!!url){

    for(var k in obj){

    url += (url.indexOf("?")==-1 ? "?" : "&");

    url+=encodeURIComponent(k)+ "=" +encodeURIComponent(obj[k]);

    }

    }else{

    //post请求(设置data信息)

    url="";

    for(var k in obj){

    url+=encodeURIComponent(k)+ "=" +encodeURIComponent(obj[k]);

    url+="&";

    }

    //删除最后一个&

    var arr=url.split("");

    arr.pop();

    url=arr.join("");

    }

    //返回拼接好的信息

    return url;

    },

    get: function (url,data,fn,ojson){

    this.xhr=new XMLHttpRequest();

    //省略data时,即不发送数据

    if(typeof data =="function"){

    ojson=fn;

    fn=data;

    data={};

    }

    //合并url和data信息

    url=this.addUrl(url,data)

    //是否异步发送

    this.xhr.open("get",url,true);

    this.xhr.send(null);

    //当请求完成之后调用回调函数返回数据

    this.success(fn,ojson);

    //链式编程

    return this;

    },

    post: function (url,data,fn,ojson){

    this.xhr=new XMLHttpRequest();

    //省略data时,即不发送数据

    if(typeof data =="function"){

    ojson=fn;

    fn=data;

    data={};

    }

    //合并data信息

    data=this.addUrl(data);

    //是否异步发送

    this.xhr.open("post",url,true);

    this.xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    this.xhr.send(data);

    //当请求完成之后调用回调函数返回数据

    this.success(fn,ojson);

    //链式编程

    return this;

    },

    //字符串转换json

    json: function (str){

    return (new Function("return " + str))();

    },

    success: function (fn,ojson){

    //当请求完成之后调用回调函数返回数据

    var self=this;

    this.xhr.onreadystatechange=function (){

    var odata;

    if(self.xhr.readyState == 4){

    if((self.xhr.status>=200 && self.xhr.status<300) || self.xhr.status == 304){

    odata=self.xhr.responseText;

    //若为json则转化json格式

    if(ojson==="json"){

    odata=self.json(odata);

    }

    fn(odata);

    }else{

    odata="request was unsuccessful: "+self.xhr.status;

    fn(odata);

    }

    }

    }

    },

    //取消异步请求

    cancel: function (){

    this.xhr.abort();

    return this;

    }

    }

    后台获取或者前端构造的数据结构:[

    {

    "name": "张三",

    "age": 18,

    "sex": "man"

    },

    {

    "name": "李四",

    "age": 20,

    "sex": "woman"

    },

    {

    "name": "王五",

    "age": 22,

    "sex": "man"

    }

    ]

    展开全文
  • } export const ajax = (url, data, suc) => { doajax (url, data, 'get').then((res) => { let { status, msg } = res.data; if (status === 0) { suc(res.data.data); } else { alert(msg); } }); } export const...

    // 用来发请求的库

    import axios from 'axios';

    import { Toast } from 'vant';

    import {

    Loading

    } from 'vant';

    // axios降级请求,处理跨域一个请求发两次的问题

    //axios.interceptors.request.use(function (config) {

    //  config.headers['Content-Type'] = 'application/x-www-form-urlencoded'

    //  if (config.method === 'post') {

    //      config.data = qs.stringify({ ...config.data })

    //  }

    //},

    //function (error) {

    //  loadinginstace.close();

    //  return Promise.reject(error);

    //})

    export const test = () => {

    console.log('test');

    }

    /**

    * url

    * data 请求参数

    * type 请求类型

    */

    export const doajax = (url, data, type) => {

    let config;

    if (type === 'get') {

    config = {

    method: type,

    params: data,

    }

    } else {

    config = {

    method: type,

    data,

    }

    }

    console.log('config',config);

    return axios(url, config);

    }

    export const ajax = (url, data, suc) => {

    doajax (url, data, 'get').then((res) => {

    let {

    status,

    msg

    } = res.data;

    if (status === 0) {

    suc(res.data.data);

    } else {

    alert(msg);

    }

    });

    }

    export const post = (url, data, suc) => {

    doajax (url, data, 'post').then((res) => {

    let {

    status,

    msg

    } = res.data;

    if (status === 0) {

    suc(res.data.data);

    } else {

    alert(msg);

    }

    });

    }

    export const loadingBegin=()=>{

    Toast.loading({

    mask:true,//是否显示蒙层

    duration:0,//持续展示toast

    forbidClick:true,//禁用背景点击

    loadingType:"spinner",

    message:"努力加载中..."

    });

    }

    export const loadingFinish=()=>{

    Toast.clear();

    }

    展开全文
  • vue-ajax封装实例

    2020-08-29 09:40:39
    下面小编就为大家带来一篇vue-ajax封装实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 在学习的过程当中,学习了解了axios的使用方法以后,进而学习了如何把ajax封装成一个方法,而后在使用中,直接调用相应的函数就方便的多了。javascriptaxios的安装vuecnpm install axios --savejavaaxios基本使用...
  • 本日给人人写一篇关于ajaxvue中的运用及封装,有些同砚可能会有疑问,由于熟习vue的都晓得,vue中有vue-resource和axios是特地用于http交互的,那末ajax岂不是节外生枝吗?其实不然,ajaxajax的上风,而且小编...
  • Vue如何封装ajax发布时间:2020-12-07 11:09:07来源:亿速云阅读:123作者:小新这篇文章主要介绍Vue如何封装ajax,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!HTML文件:Document点击...
  • vue-ajax封装

    2018-02-28 18:42:15
    /** ajax封装:* 1. 引入文件* 2. new Vue().ajax.get(url,data,fn,ojson), 或 new Vue().ajax.post(url,data,fn,ojson)* url: 需要获取数据的文件地址 (string)* data: 需要发送的信息 (可省略) (obj)* fn: 获取信息...
  • HTML文件:Document点击猎取信息{{ msg }}var vm=new Vue({el: "#app",data: {msg: "",},methods: {getInfo: function (){...this.ajax.get("1.json",{tel: 123456,address: "杭州"},function (data){self.msg=data[...
  • 为了减少代码的冗余,决定抽离出请求ajax的公共方法,供同事们使用。我使用了ES6语法,编写了这个方法。/*** @param type 请求类型,分为POST/GET* @param url 请求url* @param contentType* @param headers* @param...
  • 今天给你们写一篇关于ajaxvue中的应用及封装,有些同窗可能会有疑问,由于熟悉vue的都知道,vue中有vue-resource和axios是专门用于http交互的,那么ajax岂不是画蛇添足吗?其实否则,ajaxajax的优点,而且小编...
  • vue中axios,jsonp请求的封装管理对于刚接触前端工做的小伙伴,学会封装重复的东东是很重要,这样便于后期的维护,也节省的开发书写时间,总之好处多多1、首先本身在项目中建立一个文件包,在文件包里建立个js文件,...
  • vue项目axios封装使用

    2020-07-01 10:12:08
    vue项目axios封装使用 现在十个人有六个是面向百度编程,还有三个是面向CSDN编程。博客乱的一笔。一家原创,万家抄袭。嗯,这篇博客也是抄的,但是我还是打了原创,就是这么下流。 最近在编写vue项目的时候对于...
  • 推荐想学Vue的同学看下黄轶老师的音乐App课程jsonp为什么能跨域?1、 jsonp发送的并不是ajax请求;2、 利用动态创建一个script标签,因为script标签是没有同源策略限制的,是可以跨域的;3、 把这个script标签的src...
  • vue项目封装axios

    2018-08-31 11:50:42
    在自己的vue脚手架中封装一个axios全局使用 打开Visual Studio Code,在VS Code中打开自己的项目 下方命令行输入 npm install axios 在src 的 assets 下新建一个文件 http.js 基本的请求信息如下: ...
  • vueajax进行封装从而全局简单调用 具体操作具体更改,这里的apiMap是默认自动更新的接口文档,可以自己删掉进行更改 全局挂载 import Vue from 'vue' import apiMap from './apis.js' let loadingNum = 0 let ...
  • 如下所示:import Vue from 'vue'let service = {url: 'http://host.xxxxx.com/xxx.php'}service.ajaxReuqest = (url, options, type, fileFlag) => {for (const i in options) {if (!options[i] && ...
  • 日常总结之Vue项目封装axios-ajax请求文件(万金油版) 在开发过程中我们编辑完页面,就需要把假数据换成后台数据,便需要与后端实现联调,在普通项目,一般我们都是用ajax的方式去请求后台数据,而当我们用Vue开发...
  • 在使用Vue.js框架开发前端项目时,会经常发送ajax请求服务端接口,在开发过程中,需要对axios进一步封装,方便在项目中的使用。 2、Vue项目结构 在本地创建Vue项目,目录结构如下: - public 静态资源文件 - src ...
  • Vue之Axios AJAX封装

    千次阅读 2018-02-02 13:43:04
    前言 ... ...文档里都有,我不细讲了,进入项目 $ npm install --save-dev axios # 或者 $ cnpm install --save-dev axios 目录结构 详细代码 1. index.js (Axio
  • vue项目封装axios

    2020-02-24 15:31:12
    import axios from 'axios' ...const $ajax = axios.create({ baseURL: '', timeout: 20000 }) const ajaxPost = (api, data = null) => $ajax.post(api, qs.stringify(data, { arrayFormat...
  • 本期将分享如何在vue项目中添加Mock.js,并封装使用。 GitHub项目地址:https://github.com/jiangjiaheng/web-template 关于MockJs 1. 官方文档 本文默认你对Mock.js有一定的了解,并且阅读过Mock.js的官方文档,...
  • Vue封装ajax请求的函数(axios)

    千次阅读 2019-08-17 08:53:32
    在学习的过程中,学习了解了axios的使用方法之后,进而学习了如何把ajax封装成一个方法,然后在使用中,直接调用相应的函数就方便的多了。 axios的安装 cnpm install axios --save axios基本使用 import axi....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,269
精华内容 6,507
关键字:

vue项目ajax封装

vue 订阅