返回顶部
首页 > 资讯 > 前端开发 > VUE >vue中如何实现基于axios的ajax请求方法
  • 197
分享到

vue中如何实现基于axios的ajax请求方法

2024-04-02 19:04:59 197人浏览 薄情痞子
摘要

小编给大家分享一下Vue中如何实现基于axiOS的ajax请求方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如下所示:imp

小编给大家分享一下Vue中如何实现基于axiOSajax请求方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

如下所示:

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] && options[i] !== 0 && (options[i].length && options[i].length > 0)) {
  delete options[i]
 }
 }
 let promise = new Promise((resolve, reject) => {
 if (fileFlag) {
  Vue.axios.post(url, options, {
  headers: {
   'Content-Type': 'multipart/fORM-data'
  }
  }).then((res) => {
  resolve(res)
  })
 } else if (type === 'GET') {
  Vue.axios.get(url, { params: options }).then((res) => {
  resolve(res.data.resultObj)
  }).then((err) => {
  reject(err)
  })
 } else {
  Vue.axios.post(url, options).then((res) => {
  resolve(res)
  }).then((err) => {
  reject(err)
  })
 }
 })
 return promise
}

支持POST GET请求以及图片上传,基于axios,适用于vue,

以异步获取省份列表作为例子:

// 获取省份信息
service.getProvinceList = (options) => {
 return service.ajaxRequest(service.url + '/basic/getProvinceList', options, 'POST')
}
getProvinceList () {
 service.getProvinceList({}).then((res) => {
  this.provinceList = res.data.resultObj.data
 })
}

以上是“vue中如何实现基于axios的ajax请求方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网VUE频道!

--结束END--

本文标题: vue中如何实现基于axios的ajax请求方法

本文链接: https://lsjlt.com/news/78818.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue中如何实现基于axios的ajax请求方法
    小编给大家分享一下vue中如何实现基于axios的ajax请求方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如下所示:imp...
    99+
    2024-04-02
  • axios中如何写ajax请求
    这篇文章给大家分享的是有关axios中如何写ajax请求的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。优点:增加一个ajax接口,只需要在配置文件里多写几行就可以不需要在组件中写...
    99+
    2024-04-02
  • 基于CORS如何实现WebApi Ajax跨域请求
    这篇文章主要介绍了基于CORS如何实现WebApi Ajax跨域请求,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。概述ASP.NET Web...
    99+
    2024-04-02
  • 基于axios请求封装的vue应用实例代码
    目录什么是axios?axios的请求类型?axios封装默认的自定义配置配置的加载优先级拦截器get请求post请求delete请求put请求:更新整个对象资源patch...
    99+
    2024-04-02
  • vue axios中的get请求方式
    目录vue axios中的get请求一、安装二、使用常见错误vue axios post请求参数错误400vue axios中的get请求 一、安装 使用 npm:npm insta...
    99+
    2024-04-02
  • Vue使用ajax(axios)请求后台数据的方法教程
    目录前言:Axios安装前台部分连接后台部分(node)总结前言: 页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果。ajax可以帮助我们更好的...
    99+
    2022-11-13
    vue请求后端数据 vue ajax请求 axios请求后端数据
  • 在Vue组件化中如何使用axios处理ajax请求
    这篇文章将为大家详细讲解有关在Vue组件化中如何使用axios处理ajax请求,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。推荐方式首先在 main.js 中引入 axi...
    99+
    2024-04-02
  • Vue如何用Ajax实现跨域请求
    本篇内容主要讲解“Vue如何用Ajax实现跨域请求”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue如何用Ajax实现跨域请求”吧!一.设置config/index.js || proxyTa...
    99+
    2023-07-04
  • vue中如何使用axios数据请求get、post方法
    小编给大家分享一下vue中如何使用axios数据请求get、post方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!vue中使用axios方法我们先安装axios这个方法npm inst...
    99+
    2024-04-02
  • Vue中Axios中取消请求及阻止重复请求的方法
    目录阻止请求目的:常见情况:新建 axios.js 文件全局 main.js 引入阻止请求目的: 为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求,从而导致前端向后端重复...
    99+
    2024-04-02
  • 如何基于JS实现Ajax并发请求的控制详解
    目录前言 Ajax的串行与并行Ajax的并发请求控制的两大解决方案 基于Promise递归实现 基于Class实现 代码展示 总结 前言 最近看到一个面试题,当然了,就是这篇文章的...
    99+
    2024-04-02
  • 如何实现Ajax请求
    小编给大家分享一下如何实现Ajax请求,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Ajax不是一种新的编程语言,而是一种用于创...
    99+
    2024-04-02
  • axios+vue请求时携带cookie的方法实例
    axios+vue 请求时如何携带cookie 1,当符合同源策略时,可以直接设置 document.cookie = " 你要设置的内容 " mounted()...
    99+
    2024-04-02
  • vue项目中如何使用axios发送请求让ajax请求头部携带cookie
    这篇文章主要为大家展示了“vue项目中如何使用axios发送请求让ajax请求头部携带cookie”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue项目中如何...
    99+
    2024-04-02
  • Vue用Axios异步请求API的方法
    这篇文章主要介绍“Vue用Axios异步请求API的方法”,在日常操作中,相信很多人在Vue用Axios异步请求API的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vu...
    99+
    2024-04-02
  • 基于iframe如何实现ajax跨域请求以及获取网页中ajax数据
    这篇文章给大家分享的是有关基于iframe如何实现ajax跨域请求以及获取网页中ajax数据的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。大家都知道,在不同域的情况下是不能发送a...
    99+
    2024-04-02
  • 如何实现JavaScript原生封装ajax请求和Jquery中的ajax请求
    小编给大家分享一下如何实现JavaScript原生封装ajax请求和Jquery中的ajax请求,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1、原生ajax(1)html前端代码get请...
    99+
    2024-04-02
  • 如何实现Jquery Ajax请求
    如何实现Jquery Ajax请求,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 jQuery确实是一个挺好的轻量级的JS框架,能帮...
    99+
    2024-04-02
  • vue封装axios请求的方法是什么
    本文小编为大家详细介绍“vue封装axios请求的方法是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue封装axios请求的方法是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。其实vue封装axio...
    99+
    2023-07-04
  • 基于apicloud中AJAX请求的示例分析
    这篇文章主要介绍了基于apicloud中AJAX请求的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。get请求代码:api.ajax...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作