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活用事件触发对象动作
Aug 10 Javascript
分页栏的web标准实现
Nov 01 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 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 函数执行效率的小比较
2010/10/17 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
php广告加载类用法实例
2014/09/23 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
PHP微商城开源代码实例
2019/03/27 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
仓库保管员岗位职责
2013/12/20 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
党员自评材料范文
2014/12/17 职场文书
男方婚前保证书
2015/02/28 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python