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。

原文地址:https://www.cnblogs.com/wy120/p/10037169.html

时间: 11-29

vue搭建项目之设置axios的相关文章

仿制新浪微博iOS客户端之二-项目基础搭建及相关设置

上一次的文章主要提到了仿制新浪微博所用到的一些技术和知识点,那本文就开始进入正式的项目实施阶段了.首先要做的自然是项目的创建和相关的设置,以及基础框架的搭建了. 一.项目创建及相关设置 1.项目创建 现在越来越多的的公司开始使用Swift开发iOS和AppleWatch的项目,因此此次我们的开发也使用Swift语言来进行,新建项目,设置如下: 既然是仿制,自然可以当成是一个练习,项目名称:“WeiboTest”,编程语言选择“Swift”.然后“下一步”直到创建完成. 2.应用图标设置 将应用图

vue.js项目构建基础

这里构建的vue.js项目依赖node服务器运行. 项目搭建完整步骤: 安装node.js ,转至nodeJs网站http://nodejs.cn/ 下载nodeJs进行安装. 安装完毕检查nodeJs安装是否成功? nodeJs安装完成,自带npm,可以检查npm是否已经安装 安装webpack. webpack是一个模块加载器兼打包工具,在vue项目中,为了更好的管理代码使用模块系统,使用webpack打包. 安装webpack  查看webpack是否安装成功? 安装 vue-cli 脚手

[转]MVP+WCF+三层结构搭建项目框架

最近,我一直在重构之前做的一个项目,在这个过程中感慨万千.原先的项目是一个运用了WCF的C/S系统,在客户端运用了MVC模式,但MVC的View.Model耦合以及WCF端分布式欠佳等问题让我有了重构的想法,经过了一段时间的改造,逐渐形成了MVP+三层结构+WCF的面向服务的程序架构.在这里我把我的想法写成了一个例子,供大家参考. 在正式开始讲解之前,我必须得感谢Artech.代震军等诸多大虾,他们的文章给了我很大的启发. 我写的这个例子是关于博客管理的,逻辑很简单,就是用户发表文章.发表评论,

ASP.NET MVC搭建项目后台UI框架—7、统计报表

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 本节,我将通

vue+webpack项目结构介绍

对vue已经有了一定的了解,所以希望可以在github上找到一些项目实践,但是无奈不知道vue的整体架构是如何的,往往不知道该如何着手看,所以这里在网上找了相关的文章作为参考,对结构有一个大致的了解.参考文章如下: 用vue+webpack搭建的前端项目结构 vue+webpack项目实践 这里插一句话,搜索谷歌做的确实好,支持原创,搜索精准,不知道比度娘高到哪里去~

ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 在点击左侧菜单中的选项时,我希望有Extjs.EasyUI等中类似的tab页签功能,因为这样可以支持多个页面的浏览,有时候我们可能需要同时打开多个页

【初学菜鸟作--FTP的搭建与相关设置】

创建ftp服务器,设置并验证其控制参数 安装vsftp ftp服务的安装 [[email protected] Server]# rpm -ivhvsftpd-2.0.5-28.el5.x86_64.rpm [[email protected] ~]# vim /etc/vsftpd/vsftpd.conf 主配置文件重要参数 anonymous_enable=YES匿名用户可否访问,为NO时匿名用户不可登陆 local_enable=YES                     是否启用本地

Django 1.6 最佳实践: 如何设置django项目的设置(settings.py)和部署文件(requirements.txt)

Django 1.6 最佳实践: 如何设置django项目的设置(settings.py)和部署文件(requirements.txt) 作者: Desmond Chen,发布日期: 2014-05-17, 修改日期: 2014-05-18 在Django 1.6中的settings.py中可以修改130多项设置, 但大多数都继承自默认值. 设置是在web服务器启动时首次载入的, 服务器重启时重新载入, 因此, 程序员们应尽量避免修改正式服务器上使用的settings.py文件. 以下是一些我们

ASP.NET MVC搭建项目后台UI框架—2、菜单特效

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 上一篇,已经把整个项目的框框给搭建好了,但是还没有任何js效果实现.这一节,我就来说下关于菜单的特效实现.我需要的效果如下: 需求总结: 点击顶部菜单模块,左侧显示不同模块下面的菜单列表 点击左侧菜单选项,展开下面的子菜单,并折叠其它菜单模块,菜单图标折叠显示为+,展开显示为-. 1.先看下Top视图中代码: 2.在Top视图的head中添加如下js: <script sr

Vue.js项目模板搭建

前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能