vue中axios使用封装
一、在main.js导入
// 引入axios,并加到原型链中
import axios from 'axios';
Vue.prototype.$axios = axios;
import QS from 'qs'
Vue.prototype.qs = QS;
二、创建http.js文件(与main.js一级)
import axios from 'axios';
import qs from 'qs';//转换请求参数格式,需要时使用
axios.defaults.baseURL = process.env.BASE_API;
axios.defaults.timeout = ; // 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么,例如加入token
//config.headers.Authorization = '123';
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}); // 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 在接收响应做些什么,例如跳转到登录页
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}); //返回一个Promise(发送post请求)
export function fetchPost(url,params){
return new Promise((resolve, reject) => {//ES6构造函数 -- 待学习
axios.post(url, params)
.then(response => {
resolve(response);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
});
});
} //返回一个Promise(发送get请求)
export function fetchGet(url, param) {
return new Promise((resolve, reject) => {
axios.get(url, {params: param})
.then(response => {
resolve(response)
}, err => {
reject(err)
})
.catch((error) => {
reject(error)
})
})
}
export default {
fetchGet,
fetchPost
}
三、在要使用的vue模块导入并使用
import https from '../https.js' // 注意用自己的路径 // 请求后台数据==================
loginPost: function () {
let params ={'username': 'admin', 'password': 'admin123', 'rememberMe': 'true','isMobile':''}
https.fetchPost('/login',params ).then((data) => {
this.base.token = data.data.token
// console.log("this.base.tokenthis.base.token",this.base.token)
this.indexPost2(this.rres)
}).catch(err=>{
console.log(err)
}
)
},
indexPost2:function (date) {
var this_ = this
this_.check = false
var jobj ={data:{'menuDate': date,'token':this.base.token}}
let string = JSON.stringify(jobj)
let params = {dailyInfo:string}
https.fetchPost('/meals/mobile/getDailyMenuByDate', params)
.then((data) => {
this_.base.indexData = data
this_.check = true
// console.log('thenthenthenthen',data)
})
.catch((err)=>{
console.log(err) })
},
// ================================================
},
vue中axios使用封装的更多相关文章
- 聊聊 Vue 中 axios 的封装
聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...
- Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- vue中axios的封装以及简单使用
一.axios的封装 在vue中为了使用axios使用方便,不需要每一个模块进行导入,就需要对其进行封装: 1.新建http.js模块 import axios from 'axios' // 设置基 ...
- vue中axios的封装
第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } fr ...
- vue中axios复用封装
ajax2: function() { let that = this; return that .$http({ method: "get", url: "/Home/ ...
- vue中axios的封装(注意这里面异步的概念和用法十分重要)
todo https://www.cnblogs.com/chaoyuehedy/p/9931146.html
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- vue中axios的深入使用
如上所示一条简单的请求数据,用到了vue中axios,promise,qs等等 这里我将vue中用到的axios进行了封装方便日后使用 先对工具类进行封装utils/axios.js: // 引入模 ...
随机推荐
- unix, PF_UNIX, AF_UNIX, PF_LOCAL, AF_LOCAL - 用于本地内部进程通讯的套接字。
SYNOPSIS(总览) #include <sys/socket.h> #include <sys/un.h> unix_socket = socket(PF_UNIX, t ...
- 解决 Onenote 默认全角输入的一种解决办法(输入法已经设置为默认半角)
环境说明:Windows 7 x64 Ultimate SP1, QQ 拼音输入法 6.1(5306),Onenote 2016 x64 问题描述:每次打开Onenote,在输入法已经设置为默认半角的 ...
- matlab计时超好用
方法一: profile on <body?> profile viewer 会把所有代码的时间,都显示出来,每行每个函数用时统计,一目了然: 方法二: tic; <body-par ...
- Java中volatile关键字及其作用是什么?
在 Java 多线程中如何保证线程的安全性?那我们可以使用 Synchronized 同步锁来给需要多个线程访问的代码块加锁以保证线程安全性.使用 synchronized 虽然可以解决多线程安全问题 ...
- Q:简单实现URL只能页面跳转,禁止直接访问
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据,且不同标签页的session不能共享,通过此特性来控制某个页面只能通过上级页面同标签页跳转 ...
- J2SE基础-环境配置
学习资料:毕向东视频 1.为何配置Path? 使用javac编译文件时,先找path里设置的java路径. 如果不配置Path,在命令提示行中,则只能进入bin目录后,才能执行javac,jar等命令 ...
- 陈云pytorch学习笔记_用50行代码搭建ResNet
import torch as t import torch.nn as nn import torch.nn.functional as F from torchvision import mode ...
- NX二次开发-UF_MODL_intersect_objects获取两个对象的交点
NX9+VS2012 #include <uf.h> #include <uf_curve.h> #include <uf_modl.h> #include < ...
- shell脚本实现GoDaddy中IPv6的动态域名解析(DDNS)_可在路由中运行
首先谈一下个人的需求,家里路由拿到了运营商的外网ipv6地址,于是想着将路由的各种服务通过DDNS放到外网上来,这才有下面的动态域名解析折腾.废话不多说,进入正题. 1.首先在godaddy中注册域名 ...
- 转-vector与list的区别
转自:C++ vector和list的区别 数据结构的区别 vector vector与数组类似,拥有一段连续的内存空间,并且起始地址不变.便于随机访问,时间复杂度为O(1),但因为内存空间是连续的, ...