vue搭建项目之设置axios
首先要下载axios:
npm install axios -S
要注意的是,axios不支持Vue.use();这种方式,可以改写原型链。
第二步就是新建axios存放位置:
在项目中src中单独建立一个axios的文件夹,并在main.js中引入:
第三步对axios进行封装:
封装方法网上一大堆。本次封装如下:
在axios.js中封装的是一些获取数据方法,如:
最后声明方式:
Vue.prototype.$get = get;
Vue.prototype.$post = post;
Vue.prototype.$put = put;
Vue.prototype.$delete = remove;
在http-status.js中设置code:
module.exports = function (error) {
let message = '';
switch (error.response.status) {
case 400: message = '请求错误'; break;
case 401: message = '未授权,请登录'; break;
case 403: message = '拒绝访问'; break;
case 404: message = '请求地址错误'; break;
case 405: message = '请求方式错误'; break;
case 408: message = '请求超时'; break;
case 500: message = '服务器错误'; break;
case 501: message = '服务未实现'; break;
case 502: message = '网关错误'; break;
case 503: message = '服务不可用'; break;
case 504: message = '网关超时'; break;
default: message = 'http版本不受支持'; break;
} return message;
}
在index.js中配置axios拦截器:
import axios from 'axios';
import status from './http-status';
import './axios';
import Vue from 'vue'; // 全局的axios默认值
axios.defaults.baseURL = process.env.BASE_URL;
axios.defaults.headers.put['Content-Type'] = 'application/json'; // 超时设置
// axios.defaults.timeout = 2500; // 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
let data = response.data;
if (!data.hasOwnProperty('code')) {
return data;
}
if (data.code === 0 || data.code === -1) {
return data;
} const error = new Error(data.msg || '');
// 对请求错误做统一提示
Vue.prototype.$Message.warning(error.message);
error.data = data;
error.response = response; throw error;
}, function (error) {
// 对响应错误做点什么
if (error && error.response) {
error.message = status(error);
}
return Promise.reject(error);
});
最后就可以进行操作了,代码中有用到iview的相关组件。
当然,感谢郭大神的帮助与指导,为老铁双击666。
vue搭建项目之设置axios的更多相关文章
- vue搭建项目之设置代理
前面将项目页面.axios.组件等都准备好了,现在就差设置代理了: 首先在config下新建两个文件,分别叫做dev.uri.js和prod.uri.js,代码为: module.exports = ...
- Vue 搭建项目
Vue 搭建项目 一.node下载安装: 1.下载:https://nodejs.org/en/download/ 2.安装默认许选择,下一步就行: 3.安装完之后就可以使用npm命令 二.通过@v ...
- vue搭建项目步骤(二)
上篇是搭建Vue项目的基本,接下来是继续对做项目的记录.顺序并不一定. 五.对页面入口文件的修改: 众所周知,main.js 程序入口文件,加载各种公共组件,App.Vue为 页面入口文件.但是有时候 ...
- vue搭建项目
vue-cli 作用:快速搭建项目脚手架 安装3.0:npm i -g @vue/cli 安装桥接工具:npm i -g @vue/cli-init (vue-cli 3和旧版使用相同的命令,所以2被 ...
- vue搭建项目前奏曲——vue-cli
vue-cli是快速构建这个单页应用的脚手架,这个可是官方的.官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack.Node.js.npm ...
- 使用vue搭建项目(创建手脚架)
第一步:切换到创建的目录 创建项目 vue cerate [model] 第二步:切换到创建好的项目,然后创建element vue add element 第三步:创建router vue add ...
- 使用vue搭建应用四引入axios
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 P ...
- 关于vue搭建项目运行出行的错误问题,简直是大坑啊
解决方法简单粗暴,非常简单粗暴 直接在根目录新建一个test文件夹就可以搞定,用来放置配置文件的 折腾了我一上午啊
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
随机推荐
- 去JQUERY化
时间 2016-05-17 12:43:59 OurJS 原文 http://ourjs.com/detail/573a9cec88feaf2d031d24fc 主题 jQuery 这是一篇使用原 ...
- 【学习总结】Python-3-字符串函数-strip()方法
参考: 菜鸟教程-Python3-Python字符串-strip()方法 语法: str.strip([chars]); 参数: chars -- 移除字符串头尾指定的字符序列. 返回值: 返回移除字 ...
- 20180119-文件操作open用法
官方文档 open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, closefd=True, open ...
- smbrun - smbd和外部程序间的接口程序。
总览 SYNOPSIS smbrun shell-command 描述 DESCRIPTION 此程序是samba套件的一部分. smbrun是个非常小的“粘合”程序,用于为smbd守护程序smbd( ...
- 12-低延迟、全接口(HMDI、DVI、YPb Pr、RGB)H.264全高清编码器解码器
低延迟.全接口(HMDI.DVI.YPb Pr.RGB)H.264全高清编码器解码器 一.产品介绍 1.近零延时的H.264压缩到1920x1080p60 该产品提供分辨率为1920x1080p6 ...
- linux篇—Nginx反向代理负载均衡
一.环境准备 反向代理功能架构 3台web服务器,组建出web服务器集群 web01 10.0.0.7 172.16.1.7 web02 10.0.0.8 172.16.1.8 web03 10.0. ...
- [前端自动化]grunt的简单使用
前言 现在前端自动化已经是家常便饭,各种工具也是层出不穷,grunt.gulp.webpack是应用最广的三种工具,虽然grunt看似已垂垂老矣,但是以前写的很多项目一直用的就是grunt,温故方能知 ...
- html5 jquery音乐播放器,play()和pause()不起作用
今天在自己写的页面上加上背景音乐,当我点击图片时可以切换 播放/暂停 用jquery写的,方法总是提示没有pause这个方法! 检查了半天最后发现 你使用的是jquery选择器所以返回的是jquery ...
- java类使用
package java04; /* * 通常情况下,一个类不能直接使用,需要创建一个对象,才能使用 * *步骤: * 1.导包:就是指出需要使用的类在什么位置 * import 包名称.类名称: * ...
- linux下的软链接与硬链接
在 Linux 底下的连结档有两种,一种是类似 Windows 的快捷方式功能的文件,可以让你快速的链接到目标文件(或目录);这种链接称为软链接. 另一种则是透过文件系统的 inode 连结来产生新档 ...