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: // 引入模 ...
随机推荐
- Spring mvc Hello World
Spring mvc Hello World 添加依赖 <dependency> <groupId>org.springframework</groupId> &l ...
- python3添加requests库
1.资源下载 https://codeload.github.com/psf/requests/zip/master https://www.python.org/ https://files.pyt ...
- java中Class.getMethods()和Class.getDeclaredMethods()的区别
在java中,可以根据Class类的对象,知道某个类(接口)的一些属性(成员 ,方法,注释,注解)等.由于最近的工作中用到了这些,其中需要在代码中格局反射知道某些类的方法,查看文档的时候,看到了get ...
- 初识webSocket及其使用
阅读目录 1.什么是webSocket? 2.webSocket实现原理 3.webSocket优点 4.webSocket和socket的区别 5.webSocket API 6.webSocket ...
- net core发邮件——MimeKit
var message = new MimeMessage(); message.From.Add(new MailboxAddress("谁发的", "发送方的邮件地址 ...
- linux源码安装python及pip和django
1安装编译工具 yum install zlib-devel bzip2-devel openssl-devel python-devel kernel-devel libffi-devel ncur ...
- 在linux中的rpm -ivh 是干什么的呢?
在linux中的rpm -ivh 是干什么的呢? RMP 是 LINUX 下的一种软件的可执行程序,你只要安装它就可以了.这种软件安装包通常是一个RPM包(Redhat Linux Packet ...
- HDU6438 Buy and Resell 2018CCPC网络赛 -低买高卖-贪心经典题
目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:Portal传送门 原题目描述在最下面. 出过很多次:5 ...
- TCP之1460MSS和1448负载
TCP和1448 1448字节是实际场景下,单个TCP包的实际运载能力.也就是说,实际场景下,上层调用send(1000KB),下层会把这1000KB封装成多个TCP包进行发送.单个TCP包每次打包1 ...
- AtCoder ABC 128F Frog Jump
题目链接:https://atcoder.jp/contests/abc128/tasks/abc128_f 题目大意 给定长度为 N 的序列$s_0, s_1, \dots, s_{N-1}$,现在 ...