记一次vue+vuex+vue-router+axios+elementUI开发(二)
开发环境跟脚手架初始完毕后,我们开始配置axios请求后台接口 axios使用说明:https://www.kancloud.cn/yunye/axios/234845
1、本人是在脚手架中的src目录下新建api文件夹,在新建一个fetch.js 文件用来配置axios以及管理后台的接口
2、开始安装axios npm axios --save 安装
3、下面的代码是封住axios后的请求文件
import axios from 'axios' import qs from 'qs'import { Message } from 'element-ui'; const baseURL = '你的请求地址' // 测试地址 axios.defaults.timeout = 10000; //响应时间 // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // 设置token axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头 axios.defaults.baseURL = baseURL; //配置接口地址//POST传参序列化(添加请求拦截器) axios.interceptors.request.use((config) => {// 可以在这里设置请求头中的token// 这里写死一个token,你需要在这里取到你设置好的token的值// const token = 'this is a token';// if (token) {// 这里将token设置到headers中,header的key是Authorization,这个key值根据你的需要进行修改即可// config.headers.Authorization = token;// }//在发送请求之前做某件事if(config.method === 'post'){// config.data = qs.stringify(config.data); }return config; },(error) =>{Message({type: 'error',message: "错误的传参"})return Promise.reject(error); });//返回状态判断(添加响应拦截器) axios.interceptors.response.use((res) =>{//对响应数据做些事if(res.data.retcode == 0){return res} else if(res.data.retcode == '50021021') {localStorage.removeItem('user_token_key');// localStorage.removeItem('userName');location.href = '#/login';} else {Message({type: 'error',message: res.data.retmsg})// return Promise.reject(res);return res} }, (error) => {console.log(error)Message({type: 'error',message: "网络异常"})return Promise.reject(error); })//返回一个Promise(发送post请求) export function fetchPost(url, params) {return new Promise((resolve, reject) => {axios.post(url, params).then(response => {resolve(response.data);}, 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.data)}, err => {reject(err)}).catch((error) => {reject(error)})}) }export default {/*** 用户登录*/Login(params) {return fetchPost('/useraction/login', params)}, }
转载于:https://www.cnblogs.com/huangqiangblog/p/9523807.html
记一次vue+vuex+vue-router+axios+elementUI开发(二)相关推荐
- Vue学习笔记(二)—— vue项目中使用axios
一.文档链接 axios文档 vue开发插件 二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...
- vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据 在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...
- Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
- vue vuex使用_使用Vue和Vuex的记分板
vue vuex使用 计分板 (Scoreboard) Scoreboard using Vue and Vuex. 使用Vue和Vuex的记分板. View demo 查看演示 Download S ...
- 详解 Vue Vuex 实践
2019独角兽企业重金招聘Python工程师标准>>> 随着应用复杂度的增加,我们需要考虑如何进行应用的状态管理,将业务逻辑与界面交互相剥离,详细讨论参考笔者的2016-我的前端之路 ...
- vue vuex vue-router后台项目——权限路由(超详细简单版)
项目地址:vue-simple-template 共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 bl ...
- vue vuex 挂载_vue.js,javascript_Vuex的初始化失败,一直显示没有挂载到根组件上,奇怪了!,vue.js,javascript - phpStudy...
Vuex的初始化失败,一直显示没有挂载到根组件上,奇怪了! 代码如下 import 'babel-polyfill' import Vue from 'vue' import VueRouter fr ...
- 记录一下使用vue/vuex+SSR框架遇到的bug
项目框架:vue+vuex+vue-server-render 问题描述:页面中有个区块通过state.jkyl (JSON Object)来控制是否需要显示,页面未登录前jkyl的数据是为空的,待登 ...
- Vue教程路由以及axios的使用
目录 前言 安装 目录结构 起步 Vue模板语法 Vue条件语句 Vue循环语句 Vue事件处理 Vue表单绑定 Vue组件 Prop Vue自定义事件.指令 **自定义事件** **自定义指令** ...
最新文章
- 计算机科学英文杂志,Journal of Computer Science Technology
- 电脑卡顿,最先升级这个硬件,运行速度可快速提升!
- P1242 新汉诺塔
- 支付宝小程序公测!教程新鲜出炉
- sqlisnull mysql_SQL ISNULL()、NVL()、IFNULL() 和 COALESCE() 函数
- QT Designer中编辑菜单栏技巧
- 想做数据分析,都需要学些什么?
- 2020年IT行业薪资报告
- 从零开始的ZYNQ学习(基于矿卡EBAZ4205)(二)
- 台达0.4KW伺服上电报AL013
- 制作自己的图片数据集(附代码)
- 超详细讲解!在字节跳动我是如何当面试官的,附大厂真题面经
- 如何解决服务器证书不受信任,pycharm 如何跳出服务器证书不受信任的提示
- 微波射频学习笔记3--------微带线与带状线介绍
- StatisticsView
- 在线问答系统---数据库管理
- 虚拟语气用法总结及真题解析
- 中国电信物联网发展研究中心与华为战略合作协议
- 光盘属于计算机软件,计算机基础知识光盘的概念
- 本地js文件替换浏览器source中js文件进行开发调试,插件使用方法