相信大家在做前后端数据交互的时候都会给请求做一些简单的封装
就像之前封装ajax方法一样
axios的封装也是一样的简单
下面这个就是封装的axios的方法,require.js

import axios from 'axios'

axios.defaults.timeout = 5000
axios.defaults.baseURL = '接口名称-共用部分' /**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/ export function post (url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(response => {
resolve(response.data)
}, err => {
reject(err)
})
})
} /**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/ export function get (url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(response => {
resolve(response.data)
})
.catch(err => {
reject(err)
})
})
} /**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/ export function patch (url, data = {}) {
return new Promise((resolve, reject) => {
axios.patch(url, data)
.then(response => {
resolve(response.data)
}, err => {
reject(err)
})
})
} /**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/ export function put (url, data = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data)
.then(response => {
resolve(response.data)
}, err => {
reject(err)
})
})
}

只要在main.js里面引入就可以

import {post, get, patch, put} from './untils/require'
Vue.prototype.$post = post
Vue.prototype.$fetch = get
Vue.prototype.$patch = patch
Vue.prototype.$put = put

当你需要在页面中使用的时候不用再做引入操作

this.$post('接口名称').then((res) => {
console.log(res)
// 成功的方法回调
}).catch(function (err) {
console.log(err)
// 失败的方法回调
})

当然了这个封装的方法是根据个人的习惯来做的
如果想封装的再细致一些,那就可以把方法名称再做一下封装
把接口名称的这一块封装到一个js里面,然后module.exports一下
然后在使用的页面就不用再写接口名称了,直接使用封装的方法名就可以了

vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装的更多相关文章

  1. [web 前端] 封装简单的axios库

    转载自https://blog.csdn.net/qq_35844177/article/details/78809499 1.新建http.js文件,封装axios get post 方法 impo ...

  2. 【SSH进阶之路】一步步重构容器实现Spring框架——彻底封装,实现简单灵活的Spring框架(十一)

    文件夹      [SSH进阶之路]一步步重构容器实现Spring框架--从一个简单的容器開始(八)      [SSH进阶之路]一步步重构容器实现Spring框架--解决容器对组件的"侵入 ...

  3. echart封装,前端简单路由,图表设置自动化

    https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...

  4. Promise的简单用法

    众所周知的,Javascript是一种单线程的语言,所有的代码必须按照所谓的“自上而下”的顺序来执行.本特性带来的问题就是,一些将来的.未知的操作,必须异步实现.本文将讨论一个比较常见的异步解决方案— ...

  5. vue使用技巧:Promise + async + await 解决组件间串行编程问题

    业务场景描述 大家都通过互联网投递过简历,比如在智联.58.猎聘等平台.投递心仪的职位前一般都需要前提创建一份简历,简历编辑界面常规的布局最上面是用户的个人基本信息,如姓名.性别.年龄.名族等,接着是 ...

  6. springboot项目中接口入参的简单校验

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  7. 学习随笔:Vue.js与Django交互以及Ajax和axios

    1. Vue.js地址 Staticfile CDN(国内): https://cdn.staticfile.org/vue/2.2.2/vue.min.js unpkg:会保持和npm发布的最新的版 ...

  8. Axios & fetch api & Promise & POST

    Axios & fetch api & Promise & POST https://github.com/axios/axios https://appdividend.co ...

  9. 理解vue ssr原理,自己搭建简单的ssr框架

    前言 大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口.Vue SSR现在已经比较成熟了,但是如果是把一个SPA应用改造成SSR应用,成本还是有些 ...

  10. Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

    准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...

随机推荐

  1. Hunter’s Apprentice(判断所走路线为顺时针或逆时针)【Green公式】

    Hunter's Apprentice 题目链接(点击) 题目描述 When you were five years old, you watched in horror as a spiked de ...

  2. python + selenium登陆并点击百度平台

    from PIL import Imagefrom selenium.webdriver import DesiredCapabilitiesfrom selenium import webdrive ...

  3. 安装allure测试报告

    必须安装jdk1.8,配置环境变量 一.环境准备 Windows10 jdk-9.0.1 二.下载并安装JDK 到Java的官网下载JDK安装包,地址:http://www.oracle.com/te ...

  4. Android学习笔记通过Toast显示消息提示框

    显示消息提示框的步骤 这个很简单我就直接上代码了: Button show = (Button)findViewById(R.id.show); show.setOnClickListener(new ...

  5. Android学习笔记触摸事件

    案例代码: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <Relativ ...

  6. 深入理解Java虚拟机学习笔记(二)-----垃圾收集器与内存分配策略

    写在前面 本节常见面试题: 如何判断对象是否死亡(两种方法). 简单的介绍一下强引用.软引用.弱引用.虚引用(虚引用与软引用和弱引用的区别.使用软引用能带来的好处). 如何判断一个常量是废弃常量 如何 ...

  7. 在Java虚拟机上班是一种怎样的体验?

    228 人赞同了该回答 利益相关,匿了! JVM公司里面线程众多,派系林立,尤其是执行引擎那波人,因为是核心部门,经常diss别的部门. 428 人赞同了该回答 不请自来. 其实在JVM工作没有你们想 ...

  8. Python学习笔记——基础语法篇

    一.Python初识(IDE环境及基本语法,Spyder快捷方式) Python是一种解释型.面向对象.动态数据类型的高级程序设计语言,没有编译过程,可移植,可嵌入,可扩展. IDE 1.检查Pyth ...

  9. 使用 nuget server 的 API 来实现搜索安装 nuget 包

    使用 nuget server 的 API 来实现搜索安装 nuget 包 Intro nuget 现在几乎是 dotnet 开发不可缺少的一部分了,还没有用过 nuget 的就有点落后时代了,还不快 ...

  10. 入门大数据---Python基础

    前言 由于AI的发展,包括Python集成了很多计算库,所以淡入了人们的视野,成为一个极力追捧的语言. 首先概括下Python中文含义是蟒蛇,它是一个胶水语言和一个脚本语言,胶水的意思是能和多种语言集 ...