首先要下载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的更多相关文章

  1. vue搭建项目之设置代理

    前面将项目页面.axios.组件等都准备好了,现在就差设置代理了: 首先在config下新建两个文件,分别叫做dev.uri.js和prod.uri.js,代码为: module.exports = ...

  2. Vue 搭建项目

    Vue  搭建项目 一.node下载安装: 1.下载:https://nodejs.org/en/download/ 2.安装默认许选择,下一步就行: 3.安装完之后就可以使用npm命令 二.通过@v ...

  3. vue搭建项目步骤(二)

    上篇是搭建Vue项目的基本,接下来是继续对做项目的记录.顺序并不一定. 五.对页面入口文件的修改: 众所周知,main.js 程序入口文件,加载各种公共组件,App.Vue为 页面入口文件.但是有时候 ...

  4. vue搭建项目

    vue-cli 作用:快速搭建项目脚手架 安装3.0:npm i -g @vue/cli 安装桥接工具:npm i -g @vue/cli-init (vue-cli 3和旧版使用相同的命令,所以2被 ...

  5. vue搭建项目前奏曲——vue-cli

    vue-cli是快速构建这个单页应用的脚手架,这个可是官方的.官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack.Node.js.npm ...

  6. 使用vue搭建项目(创建手脚架)

    第一步:切换到创建的目录 创建项目 vue cerate [model] 第二步:切换到创建好的项目,然后创建element vue add element 第三步:创建router vue add ...

  7. 使用vue搭建应用四引入axios

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 P ...

  8. 关于vue搭建项目运行出行的错误问题,简直是大坑啊

    解决方法简单粗暴,非常简单粗暴 直接在根目录新建一个test文件夹就可以搞定,用来放置配置文件的 折腾了我一上午啊

  9. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

随机推荐

  1. [Python3 填坑] 015 __str__ 与 __repr__ 的区别

    目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 上例子 2.2 关系与区别 Python 3.7.3 的官方文档 网上看到一个例子,运行了一下 简单地说 1. print( 坑的信息 ...

  2. [功能集锦] 002 - mysql查询数据库字典+导出+样式一键整合至excel

    写在前面: 因为工作时候经常遇到半路接手项目的情况,由于年代久远,数据库字典这块经常缺失.故写此篇,以便复用,也希望对大家有点帮助. 随笔内容不高级,如有不妥,不吝指正. 20190730-加了一些简 ...

  3. MySQL基础(查)

    #新建一个表create database exercise; #查询表的信息SELECT * FROM student;SELECT * FROM score; #查询student表的第二条到第四 ...

  4. C#面试 笔试题 二

    1.using关键字有什么用?什么是IDisposable? using可以声明namespace的引入,还可以实现非托管资源的释放,实现了IDisposiable的类在using中创建,using结 ...

  5. Metasploitable2使用指南

    Metasploitable2使用指南 Metasploitable2 虚拟系统是一个特别制作的ubuntu操作系统,本身设计作为安全工具测试和演示常见漏洞攻击.版本2已经可以下载,并且比上一个版本包 ...

  6. Java中POJO及其细分XO、DAO的概念

    各层命名规约: A) Service/DAO 层方法命名规约 1) 获取单个对象的方法用 get 做前缀. 2) 获取多个对象的方法用 list 做前缀. 3) 获取统计值的方法用 count 做前缀 ...

  7. shell脚本从入门到精通(中级)之提高篇

    shell 脚本入门到精通(中级) 一.shell 脚本的执行 二.输出格式化 三.数据类型 四.重定向 五.变量 一.shell 脚本的执行 1. 脚本执行的4种方法 $ ls /tmp/test. ...

  8. React Native实践总结一

    一.React的世界观1.通过改变state来改变视图视图不用考虑如何改变自己,把state画出来即可.2.变量不可变通过创建一个新的state来更改state,使得变更可追踪,不容易因为其他部分修改 ...

  9. CentOS7单用户模式修改密码

    以下内容均摘抄自:https://blog.csdn.net/ywd1992/article/details/83538730  亲测有用,谢谢大佬的好文章 1.启动centos系统,并且当在GRUB ...

  10. 一、asp的写法

    一.asp的写法  vs从来都不支持asp,但是可以用vscode写,好多年前写asp的时候,用的是dreamwaver,asp还有创建项目这一说法?调试搭个iis就行了   <html> ...