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 ...
随机推荐
- iBATIS 传MAP处理方式(value是list的方式)
1.前提条件 参数是map结构的数据 key:String 类型 value:list 集合 2.处理方式 遍历集合一般常规的方式使用iterate,这里也不例外了,如下 <iterate op ...
- android glide图片加载框架
项目地址: https://github.com/bumptech/glide Glide作为安卓开发常用的图片加载库,有许多实用而且强大的功能,那么,今天就来总结一番,这次把比较常见的都写出来,但并 ...
- Linux(CentOS)下设置nginx开机自动启动(2个办法)
首先,在linux系统的/etc/init.d/目录下创建nginx文件,使用如下命令: vim /etc/init.d/nginx 在脚本中添加如下命令: #!/bin/sh # # nginx - ...
- https进行配置以及http跳转到https配置
https配置: nginx配置 server { listen 443; server_name localhost; ssl on; root html; index index.html ind ...
- Ubuntu 18.04安装MySQL指南
前言 Ubuntu18.04想要安装MySQL,只能安装MySQL8.0版本.如果你直接 apt-get install mysql-server 安装,那么恭喜踩坑! 先给出彻底删除mysql5.x ...
- Linux内存管理 (4)分配物理页面
专题:Linux内存管理专题 关键词:分配掩码.伙伴系统.水位(watermark).空闲伙伴块合并. 我们知道Linux内存管理是以页为单位进行的,对内存的管理是通过伙伴系统进行. 从Linux内存 ...
- iOS开发基础-九宫格坐标(6)
继续对iOS开发基础-九宫格坐标(5)中的代码进行优化. 优化思路:把字典转模型部分的数据处理操作也拿到模型类中去实现,即将 ViewController 类实现中 apps 方法搬到 WJQAppI ...
- 控制结构(6): 最近最少使用(LRU)
// 上一篇:必经之地(using) // 下一篇:程序计数器(PC) 基于语言提供的基本控制结构,更好地组织和表达程序,需要良好的控制结构. There are only two hard thin ...
- Web并发页面访问量统计实现
Web并发页面访问量统计实现 - huangshulang1234的博客 - CSDN博客https://blog.csdn.net/huangshulang1234/article/details/ ...
- Python之常见算法介绍
一.算法介绍 1. 算法是什么 算法是指解题方案的准确而完整的描述,是一系列解决问题的清晰指令,算法代表着用系统的方法描述解决问题的策略机制.也就是说,能够对一定规范的输入,在有限时间内获得所要求的输 ...