目录结构:

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. SQL 数据类型

    Microsoft Access.MySQL 以及 SQL Server 所使用的数据类型和范围. Microsoft Access 数据类型 数据类型 描述 存储 Text 用于文本或文本与数字的组 ...

  2. Windows安装Git

    一.安装Git for Windows(又名msysgit)  下载地址: https://git-for-windows.github.io/  在官方下载完后,安装到Windows Explore ...

  3. 使用jprofiler分析dump文件一个实例

    3 .dump 线上文件栈 [root@yszyz10a153 ~]# jmap -dump:live,format=b,file=heap201712.hropf  72947 参考:https:/ ...

  4. TensorRT&Sample&Python[introductory_parser_samples]

    本文是基于TensorRT 5.0.2基础上,关于其内部的introductory_parser_samples例子的分析和介绍. 1 引言 假设当前路径为: TensorRT-5.0.2.6/sam ...

  5. Winform 最小化双击显示,最小化右键退出。退出

    WinForm 之 窗口最小化到托盘及右键图标显示菜单 Form最小化是指整个Form都缩小到任务栏上,但是窗体以Form的标题栏形式显示在任务栏上, 若是想让Form以Icon的形式显示在任务栏右下 ...

  6. Django之自带的认证系统 auth模块

    01-Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Dj ...

  7. 小小知识点(四)——MATLAB如何画等高线图和线性规划约束方程

    MATLAB程序: figure contourf(x,y,data) % 画等高线 hold on plot(x,y(x)) %画线性规划约束方程1 hold on plot(y,x(y)) %画线 ...

  8. Django create和save方法

    Django的模型(Model)的本质是类,并不是一个具体的对象(Object).当你设计好模型后,你就可以对Model进行实例化从而创建一个一个具体的对象.Django对于创建对象提供了2种不同的s ...

  9. Linux operating system basic knowleadge

    1.Linux目录系统结构  It makes sense to explore the Linux filesystem from a terminal window. In fact, that ...

  10. Activiti6作业执行器Job Executor配置(学习笔记)

    内容概况: 异步执行配置相关: asyncExecutorActivate:这个属性是激活作业执行器,它的默认参数是false,只有设为true,activiti启动的时候才会开启线程池去扫描定时操作 ...