首页 web前端 js教程 在vue 2.x 中使用axios如何封装的get 和post方法

在vue 2.x 中使用axios如何封装的get 和post方法

Jun 02, 2018 pm 05:07 PM
axios post 装的

本文通过实例代码给大家介绍了vue 2.x 中axios 封装的get 和post方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧

vue 2.x axios 封装的get 和post方法

import axios from 'axios'
import qs from 'qs'
export class HttpService {
  Get(url, data) {
    return new Promise((resolve, reject) => {
      axios.get(url, {
        params: data
      }).then((res) => {
        if (res) {
          //成功回调
          resolve(res);
        }
      }).catch((error) => {
        reject(error);
      })
    })
  }
  Post(url, data) {
    return new Promise((resolve, reject) => {
      axios.post(url, qs.stringify(data), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Accept': 'application/json'
        }
      }).then((res) => {
        if (res) {
          //成功回调
          resolve(res);
        }
      }).catch((error) => {
        reject(error);
      })
    })
  }
}
登录后复制

postfile方法

PostFlie(url, data) {
    return new Promise((resolve, reject) => {
      //根据data对象生成FormData对象
      var temp = new FormData();
      for (var t in data) {
        temp.append(t, data[t]);
      }
      axios.post(url, temp).then((res) => {
        if (res) {
            resolve(res.Data);
        }
      }).catch((error) => {
        reject(error);
      })
    })
  }
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

vue中实现图片和文件上传的示例代码

NodeJS父进程与子进程资源共享原理与实现方法

vue中手机号,邮箱正则验证以及60s发送验证码的实例

以上是在vue 2.x 中使用axios如何封装的get 和post方法的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

在Vue应用中使用axios时出现“Uncaught (in promise) Error: Request failed with status code 500”怎么办? 在Vue应用中使用axios时出现“Uncaught (in promise) Error: Request failed with status code 500”怎么办? Jun 24, 2023 pm 05:33 PM

在Vue应用中使用axios是十分常见的,axios是一种基于Promise的HTTP客户端,可以用于浏览器和Node.js。在开发过程中,有时会出现“Uncaught(inpromise)Error:Requestfailedwithstatuscode500”的错误提示,对于开发者来说,这个错误提示可能有些难以理解和解决。本文将会探讨这

在Vue应用中使用axios时出现“TypeError: Failed to fetch”怎么办? 在Vue应用中使用axios时出现“TypeError: Failed to fetch”怎么办? Jun 24, 2023 pm 11:03 PM

最近,在使用Vue应用开发过程中,我遇到了一个常见的问题:“TypeError:Failedtofetch”错误提示。这个问题出现在使用axios进行HTTP请求时,后端服务器没有正确响应请求时发生。这种错误提示通常表明请求无法到达服务器,可能是由于网络原因或服务器未响应造成的。出现这个错误提示后,我们应该怎么办呢?以下是一些解决方法:检查网络连接由于

Vue中数据请求的选择:Axios or Fetch? Vue中数据请求的选择:Axios or Fetch? Jul 17, 2023 pm 06:30 PM

Vue中数据请求的选择:AxiosorFetch?在Vue开发中,处理数据请求是一个非常常见的任务。而选择使用哪种工具来进行数据请求,则是一个需要考虑的问题。在Vue中,最常见的两种工具是Axios和Fetch。本文将会比较这两种工具的优缺点,并给出一些示例代码来帮助你做出选择。Axios是一个基于Promise的HTTP客户端,可以在浏览器和Node.

在Vue应用中使用axios时出现“Error: Network Error”怎么解决? 在Vue应用中使用axios时出现“Error: Network Error”怎么解决? Jun 25, 2023 am 08:27 AM

在Vue应用中使用axios时出现“Error:NetworkError”怎么解决?在Vue应用的开发中,我们经常会使用到axios进行API的请求或数据的获取,但是有时我们会遇到axios请求出现“Error:NetworkError”的情况,这时我们该怎么办呢?首先,需要了解“Error:NetworkError”是什么意思,它通常表示网络连

高效利用Vue和Axios实现前端数据的批量处理 高效利用Vue和Axios实现前端数据的批量处理 Jul 17, 2023 pm 10:43 PM

高效利用Vue和Axios实现前端数据的批量处理在前端开发中,数据的处理是一个常见的任务。当我们需要处理大量数据时,如果没有有效的方法,处理数据将会变得十分繁琐和低效。Vue是一种优秀的前端框架,而Axios是一个流行的网络请求库,它们可以协同工作来实现前端数据的批量处理。本文将详细介绍如何高效利用Vue和Axios来进行数据的批量处理,并提供相关的代码示例

在Vue应用中使用axios时出现“Error: timeout of xxxms exceeded”怎么办? 在Vue应用中使用axios时出现“Error: timeout of xxxms exceeded”怎么办? Jun 24, 2023 pm 03:27 PM

在Vue应用中使用axios时出现“Error:timeoutofxxxmsexceeded”怎么办?随着互联网的快速发展,前端技术也在不断地更新迭代,Vue作为一种优秀的前端框架,近年来受到大家的欢迎。在Vue应用中,我们常常需要使用axios来进行网络请求,但是有时候会出现“Error:timeoutofxxxmsexceeded”的错误

Vue实现文件上传的完整指南(axios、element-ui) Vue实现文件上传的完整指南(axios、element-ui) Jun 09, 2023 pm 04:12 PM

Vue实现文件上传的完整指南(axios、element-ui)在现代Web应用程序中,文件上传已经成为一项基本的功能。无论是上传头像、图片、文档或者视频,我们都需要一个可靠的方法来将文件从用户的计算机上传到服务器中。本文将为您提供一份详细的指南,介绍如何使用Vue、axios和element-ui来实现文件上传。什么是axiosaxios是一个基于prom

在Vue应用中使用axios时出现“TypeError: bind is not a function”怎么办? 在Vue应用中使用axios时出现“TypeError: bind is not a function”怎么办? Jun 25, 2023 am 08:31 AM

在Vue.js应用中,使用axios是非常常见的。Axios是一个强大的HTTP请求库,可以让你轻松发送异步HTTP请求。然而,在使用axios时,会遇到一些错误,其中之一就是“TypeError:bindisnotafunction”。这个错误通常是由于axios版本不兼容Vue.js的原因导致的。让我们来看一下这个错误的解决方法。首先,我们需要

See all articles