前提条件:vue-cli 项目

安装:

npm install --save axios vue-axios qs

在main.js导入:

// 引入axios,并加到原型链中
import axios from 'axios';
Vue.prototype.$axios = axios;
import QS from 'qs'
Vue.prototype.qs = QS;

封装好的axios,拿走不送:(最好是在main.js同级目录创建一个 https.js 文件,复制粘贴下面代码,改 接口地址 就可以用)

import axios from 'axios'
import qs from 'qs' axios.defaults.timeout = ; //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //配置请求头
axios.defaults.baseURL = ''; //配置接口地址 //POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
//在发送请求之前做某件事
if(config.method === 'post'){
config.data = qs.stringify(config.data);
}
return config;
},(error) =>{
console.log('错误的传参')
return Promise.reject(error);
}); //返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
//对响应数据做些事
if(!res.data.success){
return Promise.resolve(res);
}
return res;
}, (error) => {
console.log('网络异常')
return Promise.reject(error);
}); //返回一个Promise(发送post请求)
export function fetchPost(url, params) {
return new Promise((resolve, reject) => {
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 {
fetchPost,
fetchGet,
}

开发环境一般要跨域,解决跨域问题(设置代理):vue-cli 3.0的在 package.json  同级目录新建一个 vue.config.js 文件,加入下面代码,其他版本找到配置文件的devServer加入代码:

module.exports = {
//axios域代理,解决axios跨域问题
baseUrl: '/',
devServer: {
proxy: {
'': {
target: 'http://192.168.0.108:8090',
changeOrigin: true,
ws: true,
pathRewrite: { }
}
}
}
}

修改完后记得重启项目应用配置

然后就到收获的时候了,在要请求的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最详细教程的更多相关文章

  1. vue中采用axios发送请求及拦截器

    这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

  2. vue中使用axios与axios的请求响应拦截

    VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...

  3. vue中的axios

    数据的获取最常用的就是用ajax,但在vue框架中,axios则更为方便.它是基于es6的promise 以下内容引用自[最骚的就是你] 不再继续维护vue-resource,并推荐大家使用 axio ...

  4. vue中使用axios进行http通信

    1.安装 npm install axios 2.在main.js中全局注册 // axios不可以通过use引入,可以通过修改vue原型链 import axios from 'axios' Vue ...

  5. vue中使用axios

    1.结合vue-axios使用 vue-axios是按照vue插件的方式去写的,那么结合vue-axios就可以使用Vue.use()这个方法import axios from 'axios' imp ...

  6. vue中对axios进行封装

    在刚结束的项目中对axios进行了实践(好不容易碰上一个不是jsonp的项目), 以下为在项目中对axios的封装,仅封装了post方法,因为项目中只用到了post,如有需要请自行进行修改 src/c ...

  7. vue中使用axios发送请求

    我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...

  8. Vue中使用axios发送ajax请求

    作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...

  9. vue中配置axios.js文件,发送请求

    为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...

随机推荐

  1. ASP.NET Core之NLog使用

    1.新建ASP.NET Core项目 1.1选择项目 1.2选择.Net版本 2. 添加NLog插件 2.1 通过Nuget安装 2.2下载相关的插件 3.修改NLog配置文件 3.1添加NLog配置 ...

  2. centos7编译安装lnmp

    1.前言 本文适合于已经对Linux操作系统具有基本操作经验,并且能够在Linux或Windows上通过一键搭建工具或者yum命令行进行环境搭建的读者,阅读本文需具有一定的专业知识,本文不建议初学者阅 ...

  3. linux指定只显示(只打印)文件中的某几行(中间几行)

    [一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1000 [二]显示1000行到3000行 cat ...

  4. Codeforces 576E Painting Edges [分治,并查集]

    洛谷 Codeforces 建议阅读这篇博客作为预备.无耻地打广告 思路 与bzoj4025很相似,思路也差不多,可以看上面那篇博客. 仍然是用二分图的充要条件:没有奇环. 然而这题难在每条边的存在时 ...

  5. checkstyle.xml Code Style for Eclipse

    1. Code Templates [下载 Code Templates] 打开 Eclipse -> Window -> Preferences -> Java -> Cod ...

  6. JavaWEB后端支付银联,支付宝,微信对接

    注:本文来源于:<  JavaWEB后端支付银联,支付宝,微信对接  > JavaWEB后端支付银联,支付宝,微信对接 标签(空格分隔): java 项目概述 最近项目需要后端打通支付,所 ...

  7. Confluence 6 修改 Home 目录的位置

    当 Confluence 第一次启动的时候,Confluence 将会读取 confluence-init.properties 文件并从这个文件中确定如何去查找 Home 目录. 希望修改 home ...

  8. GIL锁

    GIL锁                                                                           在CPython中,这个全局解释器锁,也称 ...

  9. python并发编程之多线程1

    一多线程的概念介绍 threading模块介绍 threading模块和multiprocessing模块在使用层面,有很大的相似性. 二.开启多线程的两种方式 1.创建线程的开销比创建进程的开销小, ...

  10. 波哥博客Url

    http://www.cnblogs.com/whatlonelytear/