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: // 引入模 ...
随机推荐
- thinkphp助手函数
tp3 C($name=null, $value=null,$default=null) 获取和设置配置参数 支持批量定义 load_config($file,$parse=CONF_PARSE) 加 ...
- Zabbix-1.8.14 安装
CentOS 6.9Apache 2.2PHP 5.3.3MySQL 5.1.73 1.下载安装zabbix软件源 在http://repo.zabbix.com/zabbix/1.8/rhel/6/ ...
- <el-table>序号逐次增加,翻页时继续累加,解决翻页时从编号1开始的情况
注释: scope.$index 当前序号 cuePage 表示当前页码 pageSize 表示每页显示的条数
- cmd操作SQLService数据库
1.win+R 输入cmd2.输入sqlcmd -s 服务器名称3. 1> 输入 use 数据库名称4. 2> go5. 1> select *from 表名6. 2> go
- 官网下载 Linux 上需要的 MySQL的步骤
1.输入MySQL 官网地址 https://dev.mysql.com/ 选择 download ->Community->MySQL Community Server 点击 MyS ...
- vue-cli3+ant-design-vue+typescript 注意事项
项目参考vue-cli3-web-init ant-design配置部分 1. 实现ant-disign-vue的按需加载方案 (1)引入所有的组件,然后加载到vue上面 components-ant ...
- delphi directui 做界面的一个例子
现在很多CS系统或者软件界面都做的非常好看,比如:QQ皮肤,迅雷下载,360杀毒界面等.这些都是运用的流行的DIRECTUI 技术,基本上有的资料都是基于C++的,很少有同仁将C++下的DIRECT ...
- NOIp2018集训test-10-4/test-10-5 (联考四day1/day2)
这个day1稍微有点毒瘤吧?? DAY1 排列 以前总是把day1t1想太复杂了翻车,差不多往正解的方向想了一下感觉不可能这么复杂这可是noipday1t1啊一定有非常简单的方法然后翻车了?? 题目转 ...
- Feign远程调用源码阅读
- [转]gulp打包工具总结
与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级 ...