vue axios同步请求解决方案

在vue项目里面，需要循环发送ajax请求，出现的问题就是循环结束，第一次服务器还没返回，导致数据处理错误，需要使用同步请求

解决方案

目前没有发现axios可以同步请求，所以只能使用jQuery，配置同步请求；

$.ajax({
 url:'/comm/test1.php',
 type:'POST', //GET
 async:false, //或false,是否异步
 data:{
  name:'yang',age:25
 },
 timeout:5000, //超时时间
 dataType:'json', //返回的数据格式：
 beforeSend:function(xhr){
 },
 success:function(data,textStatus,jqXHR){
 },
 error:function(xhr,textStatus){
 },
 complete:function(){
 }
})

vue 安装jQuery插件

$ npm install jquery --save

打开 build/webpack.base.conf 配置文件

配置完成后，在需要组件使用import $ from 'jquery';

就可以使用！

总结

以上所述是小编给大家介绍的vue axios同步请求解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解Vue 2.0封装axios笔记

    详解Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios.superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的官方推荐.已有的用户可以继续使用,但以后不再把

  • Vue axios 中提交表单数据(含上传文件)

    我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport

  • VUE axios发送跨域请求需要注意的问题

    VUE axios发送跨域请求需要注意的问题

    在实际项目中前端使用到vue,后端使用php进行开发.前端使用axios请求请求 关于跨域 跨域的概念这些就不说了,百度一大堆相关的资料信息.我就只在这里记录下我在使用当中遇到的问题,以纪念在逝去的几个小时中资料查找的艰辛. 不多说,直接上代码~~~~ 同理,跨域的解决方案为cros.服务器 PHP端代码如下(laravel 中间件进行处理): public function handle($request, Closure $next) { if ($request->isMethod('OP

  • 详解Vue用axios发送post请求自动set cookie

    详解Vue用axios发送post请求自动set cookie

    vue-resource不再维护之后,我也用起了axios,但是死活无法设置服务器发送过来的cookie 后来查询文档发现,这个是要单独配置的. // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default 当我们把此配置项设置成默认配置项并且设置成true

  • vue使用Axios做ajax请求详解

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在要使用的文件中引入axios import axios from 'axios' 3. 使用axios做请求 可以通过向 axios 传递相关配置来创建请求, 只有 url 是必需的.如果没有指定 method,请求将默认使用 get 方法. { // `url` 是用于请求的服务器 URL url

  • VUE 更好的 ajax 上传处理 axios.js实现代码

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios模块之后 import axios from 'axios'; //安装方法 npm install axios //或 bower install axios 当然也可以用script引入 <script src="https://unpkg.com/axios/dist/axios.min

  • vue axios同步请求解决方案

    vue axios同步请求解决方案

    在vue项目里面,需要循环发送ajax请求,出现的问题就是循环结束,第一次服务器还没返回,导致数据处理错误,需要使用同步请求 解决方案 目前没有发现axios可以同步请求,所以只能使用jQuery,配置同步请求: $.ajax({ url:'/comm/test1.php', type:'POST', //GET async:false, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json'

  • vue axios登录请求拦截器

    当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cnpm install --save axios  我们可以建一个js文件来做这个统一的处理,新建一个axios.js,如下 import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'mi

  • vue axios数据请求get、post方法及实例详解

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下. import axios from 'axios' 引入之后我们就可以进行数据请求了,在methods中创建一个方法 methods:{ getInfo(){ let url = "url" axios.get(url).then((r

  • 解决Vue axios post请求,后台获取不到数据的问题方法

    最近做项目,需要用到vue,后台是php,第一次使用axios进行请求,本以为同ajax一样,会很简单,但是结果往往不让人满意啊,get请求很简单,这里就不说了,主要说下 post请求方式. 使用axios进行post请求,后台居然接收不到数据,这就纳闷了,于是网上一顿搜索,现在将所用的解决办法给大家说下: 1.new URLSearchParams方式 起初使用params.append("属性名":属性值)的方式,对于简单的数据传递这样是没有问题的,后台可以正常接收数据,但我发现一

  • Vue+axios封装请求实现前后端分离

    本文实例为大家分享了Vue+axios封装请求实现前后端分离的具体代码,供大家参考,具体内容如下 前言 我们需要进行前后端分离开发,那么前后端的跨域问题就是无可避免的问题,前后端的请求也是无可避免的,Vue之中有一个请求组件是axios,我们可以对axios进行封装作为我们请求的工具组件 # 一.封装axios vue.config.js 配置文件 module.exports = { configureWebpack: { resolve: { alias: { api: '@/api', a

  • vue axios接口请求封装方式

    目录 vue axios接口请求封装 总结 vue axios接口请求封装 简易记录一下最近用到的比较顺手的.axios接口请求的封装 1.新建network文件夹,其内新建request.js 设置一个 baseURL ,便于为axios实例传递相对url 2.新建api文件夹,其内新建index.js.home.js index.js主要是为了便于导出可能有多个页面相关的请求 home.js中主要封装有关home页的请求操作,这里名字随便取即可 3.在main.js中导入/api/index

  • vue axios数据请求及vue中使用axios的方法

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: -------------------------------------------------------------------------------- •从浏览器中创建 XMLHttpRequest •从 node.js 发出 http 请求 •支持 Promise API •拦截请求和响应 •转换请求和响应数据 •取消请求 •自动转换JSON数据 •客户端支

  • vue轮询请求解决方案的完整实例

    轮询的理解 其实轮询的重点在于间隔多少时间执行一次,而并非循环本身.ajax是异步请求,从发起请求到接受到响应即为一个完整的过程,这个过程所需要的时间是无法预料的,说的极端点,若请求所需的时间超过了我们轮询的间隔时间,那么是会出现很多问题的,所以轮询的间隔应该是在确保这个请求过程完成的基础之上的,这也更符合逻辑. 业务描述: 页面初始化显示第一页数据,随后每隔十秒当前页数据刷新 更改筛选条件或者更改页码直接刷新数据,随后每个十秒当前也数据刷新 业务逻辑点分析: 手动调用时,立即执行发起请求 随后

  • vue axios请求拦截实例代码

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 下面代码给大家介绍vue axios 请求拦截,具体代码如下所示: import axios from 'axios';//引入axios依赖 imp

  • vue axios 在页面切换时中断请求方法 ajax

    如下所示: Vue.prototype.$ajax=axios; const CancelToken = axios.CancelToken; let cancel; let cancelAjaxText = '中断成功'; Vue.prototype.post = function(url,data,loading){ var ajax = Vue.prototype.$ajax({ method: 'post', url:url, data: data, cancelToken: new C

随机推荐