目录结构:

api.js

export default {
myTopic: '/api/subscribe-data/post/cat'
}

request.js

import axios from 'axios'
import apis from './api'
import root from './root'
const request = axios.create({
baseURL: root.httpUrl
}) export default {
// post
post (urlKey, params) {
return request({
headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'},
method: 'post',
url: apis[urlKey],
data: params
})
}
}

root.js

const root = {
httpUrl: '//neican.ink:2080'
}
export default root

在main.js中

import request from '../apis/request.js'

Vue.prototype.$request = request

在组件中就可以使用request.post进行请求了

this.$request.post('myTopic').then((res)=>{

  console.log(res)

})

vue封装axios方法推荐)的更多相关文章

  1. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  2. 封装axios方法之一

    一.先来说说为什么要封装axios异步请求. 我们前端开发中总是会遇到跨域的问题,我们会配置proxy来解决跨域的问题,无论是vue 还是react. 如何配置我这里就不说了. 然后...然后我们就会 ...

  3. vue 封装axios以及使用中间代理 proxy

    为什么需要封装呢?主要是为了更好管理项目以及增加复用性 1.首先在src文件夹下创建api文件夹 . utils文件夹 . server文件夹 api:创建一个index.js文件   用来存放接口地 ...

  4. vue中封装axios方法

    axios基本配置 使用方法 import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: proces ...

  5. vue封装axios

    一.安装axios npm install --save axios 二.在src下面创建文件夹api=>api.js(接口集合)+http.js(封装的请求) 三.在main.js中引用api ...

  6. vue 封装 axios 和 各类的请求,以及引入 .vue 文件中使用

    //src 底下建立 api 文件夹 // api 文件夹下建立 request,js 文件,文件内容复制下面这段代码即可   /**  * ajax请求配置  */ import axios fro ...

  7. vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装

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

  8. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  9. vue中axios的封装

    第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } fr ...

随机推荐

  1. equals方法相关总结

    先说一下Object类吧: 这是一个号称为祖宗类的东西,是所有类的父类,也是唯一一个没有父类的类. 接口不继承object类 并且Object类存在于java的lang包中,我们都知道存在于lang包 ...

  2. c# 正则验证

    1.验证百分数 bool tempBool = Regex.IsMatch(str, @"[1-9]{0,1}[0-9](\\.[0-9])?%");

  3. F. Multicolored Markers(数学思维)

    思维:思维就是将大的矩形放在小矩形里面,让大矩形的宽和长尽量靠近. 很容易得到 (a+b)% i = 0 的话, 保证了大矩形的形成,同时里面表示了两种情况:1, a % i =0, b % i=0; ...

  4. Java 前后端List传值

    js代码 function click(){ var arrays = new Array(); for (var i = 0; i < arr.length; i++) { arrays.pu ...

  5. drawnet.py绘制网络结构

    脚本在caffe的python目录里,需要安装pydot,graphviz 安装pydot: $ sudo apt-get install python-pydot 安装graphviz: $ sud ...

  6. [2019BUAA软工助教]第0次个人作业

    [2019BUAA软工助教]第0次个人作业 一.前言 我认为人生就是一次次地从<存在>到<光明>. 二.软件工程师的成长 博客索引 同学们在上这门课的时候基本都是大三,觉得在大 ...

  7. 控制结构(2): 卫语句(guard clause)

    // 上一篇:分枝/叶子(branch/leaf) // 下一篇:状态机(state machine) 基于语言提供的基本控制结构,更好地组织和表达程序,需要良好的控制结构. 典型代码: 同步版本 f ...

  8. 其他综合-使用Xshell远程连接管理Linux实践

    使用Xshell远程连接管理Linux实践 1. Xshell整体优化 1)点击 工具 ,然后选择 选项 2)在 常规 选项中,下面的存放路径根据个人爱好修改(可选默认) 3)在 更新 选项中,将 √ ...

  9. Activiti6-数据库配置-dbconfig(学习笔记)

    常用数据连接池种类: 不一样的地方在于filters过滤器,设置了统计.和记录 avtiviti支持的数据库有: <?xml version="1.0" encoding=& ...

  10. .class和.getClass()的区别

    使用指定类初始化日志对象,在日志输出的时候,可以打印出日志信息所在类 如: getClass() 返回此 Object 的运行时类. //需要有com.lpx.test.class这个类 Logger ...