目录结构:

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. Iris jwt 使用

    jwt分为三个部分: ​ 1.header,用来存储算法和token类型等信息 ​ 2.payload, 一些简单的信息 ​ 3.签名,来验证token是否合法 iris-jwt 这是初始化jwt中间 ...

  2. UVA10054-The Necklace(无向图欧拉回路——套圈算法)

    Problem UVA10054-The Necklace Time Limit: 3000 mSec Problem Description Input The input contains T t ...

  3. SpringCloud(3)服务消费者(Feign)

    上一篇文章,讲述了如何通过 RestTemplate+Ribbon 去消费服务,这篇文章主要讲述如何通过Feign去消费服务. 1.Feign简介 Feign是一个声明式的伪Http客户端,它使得写H ...

  4. MariaDB第三章:数据库设计与备份--小白博客

    数据库设计 1.第一范式(确保每列保持原子性) 第一范式是最基本的范式.如果数据库表中的所有字段值都是不可分解的原子值,就说明该数据库表满足了第一范式. 2.第二范式(确保表中的每列都和主键相关) 第 ...

  5. JS 函数节流与防抖

    前言 事件的触发权很多时候属于用户,可能会出现下列问题: 向后台发送数据,用户频繁触发,对服务器造成压力: 一些浏览器事件,如window.onresize,window.mousemove等,触发的 ...

  6. jmeter学习记录--08--第三方测试组件

    我们安装的JMeter版本,功能仍然有欠缺,插件是一种补充,官方提供了很多插件. 官网地址:http://www.jmeter-plugins.org/, 里面有很多可以安装到JMeter的插件,基本 ...

  7. 【翻译】asp.net core中使用MediatR

    这篇文章来自:https://ardalis.com/using-mediatr-in-aspnet-core-apps 本文作为翻译,有一些单词翻译成中文可能会有一些误解(对于读者)或者错误(对于作 ...

  8. C# Note38: Export data into Excel

    Microsoft.Office.Interop.Excel You have to have Excel installed. Add a reference to your project to ...

  9. 笔记本装双系统!win10+Linux!所有的坑自己一个个爬过来,纪念一下。

    笔记本装双系统!win10+Linux!所有的坑自己一个个爬过来,纪念一下. 2018年09月16日 21:27:19 Corax_2ven 阅读数:14038   写在前面,装了大概5遍,装了删删了 ...

  10. HashMap底层实现原理

    HashMap底层实现 HashMap底层数据结构如下图,HashMap由“hash函数+数组+单链表”3个要素构成 通过写一个迷你版的HashMap来深刻理解 MyMap接口,定义一个接口,对外暴露 ...