vue 封装axios以及使用中间代理 proxy
为什么需要封装呢?主要是为了更好管理项目以及增加复用性
1、首先在src文件夹下创建api文件夹 、 utils文件夹 、 server文件夹
api:创建一个index.js文件 用来存放接口地址
utils:用来存放公用js文件
server:用来存放请求的接口数据
2、在package.json文件中增加以下代码 【以下代码是中间代理作用】
3、在api文件中的index.js中写入 【api里面的命名全部为大写,用于区分】
const SAT_HOST = "http://localhost:8080"; /** * 请求电影 正在热映影片数据 */ const GET_PLAYING = "/ajax/movieOnInfoList" 记住一定要记得向外输出 export default{ SAT_HOST, GET_PLAYING }
在utils文件夹中创建http.js文件 封装 axios 【注:首先需要安装axios 不做赘述 (npm)】
import API from '../api'; import axios from 'axios' export default function http({ url, method, data }) { let options = { url: url, method: method, baseURL: API.SAT_HOST, timeout: 2000 } if (method == 'GET') { options.params = data } else if (method == "POST") { options.data = data } return axios(options) }
在server文件夹中创建一个用于请求数据的js文件 ,文件名自取 代码如下
import API from '../api'; import http from '../utils/http.js' export function getPlaying(){ return new Promise((resolve,reject)=>{ http({ url:API.GET_PLAYING, method:'GET', //用于写参数 data:{ } }) .then(({data,status})=>{ if(status != 200){ return {} }else{ let data2 = data resolve({ data:data2 }) console.log(data); } }) .catch(error=>{ console.log(error) }) }) }
4、需要在哪个vue文件中引入接口数据
<template> <div></div> </template> <script>引入接口数据到当前vue文件 import {getPlaying} from './server/movieList' export default { data(){ return{ } }, created(){ getPlaying().then(({movieList})=>{ console.log(movieList) }) } } </script> <style> </style>
vue 封装axios以及使用中间代理 proxy的更多相关文章
- Vue 封装axios(四种请求)及相关介绍(十三)
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
- 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方法推荐)
目录结构: api.js export default { myTopic: '/api/subscribe-data/post/cat' } request.js import axios from ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy
1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式 在main.js中如下声明使用 import axios from 'axios'; ...
- Vue 给axios做个靠谱的封装(报错,鉴权,跳转,拦截,提示)
需求及实现 统一捕获接口报错 弹窗提示 报错重定向 基础鉴权 表单序列化 用法及封装 用法 // 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道可以去了解npm ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- vue中axios 配置请求拦截功能 及请求方式如何封装
main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...
随机推荐
- ios 导航栏(自己定义和使用系统方式)
系统方式: //1.设置导航栏背景图片 [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] ini ...
- 自定义列标题 case when
set@schoolid=41;select l.StartTime,l.EndTime,c.EntranceYear as 入学级,cg.Grade as 年级,c.ClassName as 班级名 ...
- 粗结MySql数据库基础知识点之一
首先弄什么是数据库? 数据库就是用来存储和管理数据的仓库. 数据库存储数据的优点: 1.可存储大量的数据 2.方便检索 3.保持数据的一致性,完整性 4.安全 可共享 5.通过组合分析,可以产 ...
- oc29--property修饰符
// // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject /* 如果给一个属性同时提供了g ...
- Linux下使用popen()执行shell命令【转】
本文转载自:https://my.oschina.net/u/727148/blog/262987 函数原型: #include “stdio.h” FILE popen( const char co ...
- 杂项:Web API
ylbtech-杂项:Web API 今天的web计算平台包含了广泛的功能,其中的大部分均可以通过API(应用程序编程接口)访问. 从简单的社会书签服务del.icio.us,到复杂得多的amazon ...
- leetcode排列组合相关
目录 78/90子集 39/40组合总和 77组合 46/47全排序,同颜色球不相邻的排序方法 78/90子集 输入: [1,2,2] 78输出: [[], [1], [2], [1 2], [2], ...
- [Apple开发者帐户帮助]三、创建证书(6)创建创建VoIP服务证书
VoIP:基于IP的语音传输(英语:Voice over Internet Protocol,缩写为VoIP)是一种语音通话技术,经由网际协议(IP)来达成语音通话与多媒体会议,也就是经由互联网来进行 ...
- css3 选择器 权重问题 (第二部分)
这篇博文有关css的权重问题,我个人认为这是css知识中很重要的一个知识点.因为在开发的过程能中我们会经常遇到这种问题,特别是如果你使用框架的时候,有些框架的某些标签有一些默认的样式.所以我们可以通过 ...
- go并发编程 WaitGroup, Mutex
1.背景 记录一下,方便后续写代码直接使用. 需要注意几点: chan 默认支持多协程工作,不需要加锁. 其他变量操作需要使用锁保护(map多协程并发写会panic, 并且无法捕获). 启动gorou ...