vue简单封装axios插件和接口的统一管理操作示例


Posted in Javascript onFebruary 02, 2020

本文实例讲述了vue简单封装axios插件和接口的统一管理操作。分享给大家供大家参考,具体如下:

现在很多公司的项目都是前后端分离的项目,那么说到前后端分离,必定会有ajax请求来获得后台的数据。

在做jquery项目的时候,我们都会使用它封装好的方法来直接发起ajax请求。

在vue项目中,我们使用最多的就是axios这个插件,下面就简单的封装下这个插件并且把接口给统一化管理。

一、安装和配置

1.在项目根目录下打开终端安装

npm install axios -S

2.安装完成以后,在src目录下创建utils目录,用来存放用到的所有工具和插件(个人习惯)

3.在utils目录创建request.js文件,用来配置axios,代码如下:

import axios from 'axios' //引入axios
const service = axios.create({
 // api 的 baseUrl 就是每个请求前面相同的地址,这个地方因为我配置了环境,所以直接取环境里的配置
 baseURL: process.env.BASE_URL,
 timeout: 5000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
 config => {
  //这里是每个请求的设置,比如每个请求都携带一个token,或者当为post请求时,引入qs格式化参数。
  return config
 },
 error => {
  console.log('请求失败:' + error)
  Promise.reject(error)
 }
)
// response 拦截器
service.interceptors.response.use(
 response => {
  const res = response.data
  //这个地方的code自己与后台约定(可以根据状态码,设置自己要提示的信息)
  if (res._code !== '10000') {
   //在此可以加几种比较普遍的设置,然后可以把单独的返到页面中设置
   return Promise.reject(res)
  } else {
   return response.data
  }
 },
 error => {
  console.log('响应失败:' + error)
  return Promise.reject(error)
 }
)
export default service

二、使用

1.在src目录下创建api文件夹,api文件夹与页面文件夹目录结构相同,名字最好也其相同语义的名字(个人习惯,方便管理)

2.比如我的页面结构里有个manage目录,里面有个user.vue页面,那么相同的在api目录下,也应有个manage目录,里面有个user.js文件

3.user.js代码如下:

//引入配置好的axios
import request from '@/utils/request'
//获取用户列表
export const getUserList = params => { return request({ url: '你的接口地址', method: 'get', params }) }
//增加用户
export const addUser = data => { return request({ url: '你的接口地址', method: 'post', data }) }
//删除用户
export const delUser = data => { return request({ url: '你的接口地址', method: 'post', data }) }
//修改用户信息
export const addUserInfo = data => { return request({ url: '你的接口地址', method: 'post', data }) }
//查询用户详细信息
export const getUserDetail = params => { return request({ url: '你的接口地址', method: 'get', params }) }

4.user.vue代码如下:

<script>
import userApi from '@/api/manage/user'
export default {
  name: "User",
  data(){
    return {}
  },
  created(){
    //不需要传递参数
    userApi.getUserList()
    .then( res => {
      //成功回调
    })
    .catch( err => {
      //失败回调
    })
    //需要传递参数
    let userInfo = {
     name: '张三',
     age: 18
    }
    userApi.addUser(userInfo)
    .then( res => {
      //成功回调
    })
    .catch( err => {
      //失败回调
    })
  }
}
</script>

附常见状态码:

const status = error.response.status;
let msg = "";
switch (status) {
   case 400:
    msg = "错误的请求"
    break;
   case 401:
    msg = "未授权,请重新登录"
    break;
   case 403:
    msg = "拒绝访问"
    break;
   case 404:
    msg = "未找到该接口地址"
    break;
   case 405:
    msg = "请求未被允许"
    break;
   case 408:
    msg = "请求超时"
    break;
   case 500:
    msg = "服务端出错了"
    break;
   case 501:
    msg = "网络未实现"
    break;
   case 502:
    msg = "网络错误"
    break;
   case 503:
    msg = "服务不可用"
    break;
   case 504:
    msg = "网络超时"
    break;
   case 505:
    msg = "http版本不支持"
    break;
   default:
    msg = "连接错误"
    break;
 }

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
JavaScript实例 ODO List分析
Jan 22 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 #Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 #jQuery
基于node+vue实现简单的WebSocket聊天功能
Feb 01 #Javascript
基于vue和websocket的多人在线聊天室
Feb 01 #Javascript
node crawler如何添加promise支持
Feb 01 #Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 #Javascript
js获取本日、本周、本月的时间代码
Feb 01 #Javascript
You might like
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
python 字符串常用方法汇总详解
2019/09/16 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
什么是java序列化,如何实现java序列化
2012/11/14 面试题
医学专业毕业生推荐信
2014/07/12 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
教师工作表现评语
2014/12/31 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
楚门的世界观后感
2015/06/03 职场文书
淮海战役观后感
2015/06/11 职场文书
铁人观后感
2015/06/16 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python