vue封装axios方法推荐)
目录结构:
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方法推荐)的更多相关文章
- Vue 封装axios(四种请求)及相关介绍(十三)
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
- 封装axios方法之一
一.先来说说为什么要封装axios异步请求. 我们前端开发中总是会遇到跨域的问题,我们会配置proxy来解决跨域的问题,无论是vue 还是react. 如何配置我这里就不说了. 然后...然后我们就会 ...
- vue 封装axios以及使用中间代理 proxy
为什么需要封装呢?主要是为了更好管理项目以及增加复用性 1.首先在src文件夹下创建api文件夹 . utils文件夹 . server文件夹 api:创建一个index.js文件 用来存放接口地 ...
- vue中封装axios方法
axios基本配置 使用方法 import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: proces ...
- vue封装axios
一.安装axios npm install --save axios 二.在src下面创建文件夹api=>api.js(接口集合)+http.js(封装的请求) 三.在main.js中引用api ...
- vue 封装 axios 和 各类的请求,以及引入 .vue 文件中使用
//src 底下建立 api 文件夹 // api 文件夹下建立 request,js 文件,文件内容复制下面这段代码即可 /** * ajax请求配置 */ import axios fro ...
- vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装
相信大家在做前后端数据交互的时候都会给请求做一些简单的封装就像之前封装ajax方法一样axios的封装也是一样的简单下面这个就是封装的axios的方法,require.js import axios ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- vue中axios的封装
第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } fr ...
随机推荐
- Node、TS、Koa学习笔记
这样定义可以轻松拿到gender属性 这样定义,函数内显示没有gender 这种方法能得到gender但是函数内部没有gender 这种方式能到gender 但是在函数里施symbel属性,外部不能访 ...
- STM32 FSMC使用笔记
最近在使用STM32的FSMC与FPGA做并行通信总线控制,做一下总结 1,利用FSMC读取写入16位数据时的封装函数如下,不这样使用的话在与FPGA进行通信的过程中可能会出现不可预知的错误. #de ...
- future builder
import 'package:flutter/material.dart';import 'dart:convert';import 'package:http/http.dart' as http ...
- 在Fabric ChainCode中导入第三方包(以状态机为例)
在企业级应用开发中,经常会涉及到流程和状态,而有限状态机(FSM)则是对应的一种简单实现,如果复杂化,就上升到Workflow和BPM了.我们在Fabric ChainCode的开发过程中,也很可能涉 ...
- 浮点数乘积的取整intval,以及高精度函数bcmath的使用
线上发现个bug,浮点数乘积以后取整,得到的数不符预期.还记得上次踩过的坑是数据库类型转换的一个问题.这个也相当于类型转换了..尴尬 浮点数计算的精度一定要谨慎. 例子如下: <?php $a ...
- linkedin 第三方网站登录(JavaScript SDK)
官网:https://developer.linkedin.com/docs/oauth2 一.配置LinkedIn应用程序 a.创建一个应用 | https://www.linkedin.com ...
- BS架构和CS架构的区别
C/S架构的优缺点: *优点: 1.客户端因为是独立设计,所以可以实现个性化 2.因为客户端是需要进行安装的,可以不需要重复安装和加载 3.因为客户端是独立开发的,所以有能力对客户端进行安全设计 4. ...
- mpvue-Vant Weapp踩坑记
微信开发者工具:开发.调试和模拟运行微信小程序的最核心的工具了,所以必须安装 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue- ...
- Lodop、c-lodop注册与角色简短问答
注册与角色:参考http://www.c-lodop.com/demolist/t1.html参考链接里的三种场景,是哪种角色.客户端访问网站后用自己的打印机打印.是客户端本地打印角色.IP和域名注册 ...
- Linux 学习 (四) 帮助命令
Linux达人养成计划 I 学习笔记 man 命令 获取指定命令的帮助 man的级别 1:查看命令的帮助 2:查看可被内核调用的函数的帮助 3:查看函数和函数库的帮助 4:查看特殊文件的帮助(主要是/ ...