Ajax在vue中的封装及使用

pingink 发布于2019-08-02 14:22 / 2061人阅读

摘要：今天给大家写一篇关于在中的应用及封装，有些同学可能会有疑问，因为熟悉的都知道，中有和是专门用于交互的，那么岂不是多此一举吗其实不然，有的优势，并且小编本身对有着特殊的感情，今天就给大家详细详解在中的应用。

今天给大家写一篇关于ajax在vue中的应用及封装，有些同学可能会有疑问，因为熟悉vue的都知道，vue中有vue-resource和axios是专门用于http交互的，那么ajax岂不是多此一举吗？其实不然，ajax有ajax的优势，并且小编本身对ajax有着特殊的感情，今天就给大家详细详解ajax在vue中的应用。

首先我们有必要配置一下jQuery，具体配置方法很简单，教程如下：

</>复制代码 
1.安装jquery 
npm install jquery --save-dev
 
2.build/webpack.base.conf.js中， 
导入：var webpack = require("webpack"); 
最下面添加： 
plugins: [ 
new webpack.ProvidePlugin({ 
$:"jquery", 
jQuery:"jquery", 
"window.jQuery":"jquery" 
}) 
]

如果你还未能配置好jquery的话，可以百度查找最新的教程解决问题，当然，配置jquery也是因为配合使用ajax，接下来我们需要新建一个js文件，存放的位置如下，当然也可以跟我的位置不同，随意

我们新建一个请求http的方法，叫postvoid

</>复制代码 
var common = {
    postvoid(url, data, cellback) {
    var token = xxxxxx;
    var username = xxxxxxx;
    $.ajax({
      type: "POST",
      url: this.res_url + url,
      data: data,
      async: true,
      headers: {
        "token": token,
        "username": username
      },
      success: function (res) {
        cellback(res)
      },
      error: function () {
        alert("网络错误")
      }
    })
  }
    
}

module.exports = common
入参的url是请求地址，data是请求入参，callback是回调函数，用于返回调用方结果用，ajax的headers是请求头信息，module.exports = common 是把方法暴露给出去，方便调用。

下面我们看一下如何调用这个文件这个方法

首先我们在test.vue文件中导入http.js文件，并把结果赋给变量g，方便调用

</>复制代码 
 g.post_func("/api/v1/xxx", req_data, function(data) {
        console.log(data);
      });

调用起来就很简单了，把参数传进去，打印data就可以了

GPU云服务器云服务器一个封装的Ajax类原生js封装ajax js ajax 请求数据封装 webrtc中的网络封装

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53766.html

Ajax在vue中的封装及使用

摘要：今天给大家写一篇关于在中的应用及封装，有些同学可能会有疑问，因为熟悉的都知道，中有和是专门用于交互的，那么岂不是多此一举吗其实不然，有的优势，并且小编本身对有着特殊的感情，今天就给大家详细详解在中的应用。今天给大家写一篇关于ajax在vue中的应用及封装，有些同学可能会有疑问，因为熟悉vue的都知道，vue中有vue-resource和axios是专门用于http交互的，那么ajax...

godruoyi 2019-08-23 15:33 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
迈出全栈第一步，vue+node+mysql独立完成前后端分离的增删改查流程

摘要：本使用创建本地服务器，在就能完成全部流程，并不需要线上服务器。路径要与后端接口一致。后端返回成功后，前端数据中对应的元素也要删掉，更新视图。控制器里拿一个方法出来说一下吧，完整的代码都在。读取操作完成后调用释放连接。写在前面本文只是本人学习过程的一个记录，并不是什么非常严谨的教程，希望和大家一起共同进步。也希望大家能指出我的问题。适合有一定基础，志在全栈的前端初学者学习，从点击按钮...

fsmStudy 2019-08-20 16:10 评论0 收藏0