前提条件: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. PHP导入导出csv文件 Summer-CSV

    2017年11月9日09:25:56 根据项目实践总结的一个类文件, mac/win下没乱码 简体中文 默认从gb2312转到utf-8 https://gitee.com/myDcool/PHP-C ...

  2. C# 操作Excel加水印

    首先下载免费版的Excel组件- Spire.XLS,安装完成后在bin目录里面有需要用到的dll文件,引用到自己项目里面. 我这里全引进来了,一共就四个: 界面 效果 全部代码 private st ...

  3. cmder 神器 +curl

    cmder 神器 https://www.jianshu.com/p/7a706c0a3411 curl https://www.cnblogs.com/zhuzhenwei918/p/6781314 ...

  4. 解决Javascript中$(window).resize()多次执行(转)

    https://www.cnblogs.com/shuilangyizu/p/6816756.html 有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配.这个 ...

  5. Where is NuGet in VS2017 Community?

    问题:在VS2017中找不到NuGet 回答:https://stackoverflow.com/questions/43702484/where-is-nuget-in-vs2017-communi ...

  6. 改造 Android 官方架构组件 ViewModel

    前言 Android 官方架构组件在今年 5 月份 Google I/O 大会上被公布, 直到 11 月份一直都是测试版, 由于工作比较繁忙, 期间我只是看过类似的文章, 但没有在实际项目中使用过, ...

  7. 关于deepin linux15.6-15.9.1系统播放视频卡顿解决办法

    关于deepin linux15.6-15.9.1系统播放视频卡顿解决办法 chrome浏览器 关闭chrome硬件加速模式 设置>高级>使用硬件加速模式 注释:由于视频卡顿是因显卡驱动问 ...

  8. 五.Bash Shell编程基础入门实战

    知识回顾 运行脚本我们一般用sh 不用单独去加执行权限 OLDBOY=10只适用当前环境 局部变量 export OLDBOY把它设置为临时的环境变量应为已经=10了所以不用export OLDBOY ...

  9. 用mybatis做数据库处理 代码中的字段大小写 要和mapper映射设置的大小写一致(这TM不废话么,原谅我渣!~~)

    简单描述情况:其实这个问题怎么说呢,有人给你说,你肯定能意识到,必须大小写对应的嘛.emmmm我现在才意识到是因为:自己在下边敲代码,配的mapper文件并没有把属性变量,和数据库里的段单独提出来做映 ...

  10. 【mongo】可以用localhost启动,无法用ip启动问题的解决

    问题: mongo安装在a.b.c.d机器上,启动mongo服务后, mongo localhost:27017可以进入数据库, mongo 127.0.0.1:27017也可以进入数据库 mongo ...