vue 对axios get pust put delete封装的实例代码


Posted in Javascript onJanuary 05, 2020

vue 对axios get pust put delete封装的实例代码

axios.js

import axios from 'axios';
import Qs from 'qs';
import {Message} from 'element-ui';
 
 
axios.defaults.baseURL = "/api";
// 设置请求超时时间
axios.defaults.timeout = 30000;
 
// 设置post请求头
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
 
// 请求拦截
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么 验证token之类的
 
  return config;
}, error => {
  // 对请求错误做些什么
 
  Message.error({message: '请求超时!'})
  return Promise.error(error);
})
 
// 响应拦截
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
 
  return response;
}, error => {
  // 对响应错误做点什么
 
  return Promise.reject(error);
});
 
 
// 封装get方法和post方法
 
/**
 * get方法,对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data);
      // Loading.service(true).close();
      // Message({message: '请求成功', type: 'success'});
    }).catch(err => {
      reject(err.data)
      // Loading.service(true).close();
      Message({message: '加载失败', type: 'error'});
    })
  });
}
 
/**
 * post方法,对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(res => {
        resolve(res.data);
        // Loading.service(true).close();
        // Message({message: '请求成功', type: 'success'});
      })
      .catch(err => {
        reject(err.data)
        // Loading.service(true).close();
        Message({message: '加载失败', type: 'error'});
      })
  });
}
 
/**
 * post方法,参数序列化
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function qspost(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, Qs.stringify(params))
      .then(res => {
        resolve(res.data);
        // Loading.service(true).close();
        // Message({message: '请求成功', type: 'success'});
      })
      .catch(err => {
        reject(err.data)
        // Loading.service(true).close();
        Message({message: '加载失败', type: 'error'});
      })
  });
}
 
 
/**
 * put方法,对应put请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function put(url, params) {
  return new Promise((resolve, reject) => {
    axios.put(url, params)
      .then(res => {
        resolve(res.data);
        // Loading.service(true).close();
        // Message({message: '请求成功', type: 'success'});
      })
      .catch(err => {
        reject(err.data)
        // Loading.service(true).close();
        Message({message: '加载失败', type: 'error'});
      })
  });
}
 
 
/**
 * delete
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function deletefn(url, params) {
  return new Promise((resolve, reject) => {
    axios.delete(url, params)
      .then(res => {
        resolve(res.data);
        // Loading.service(true).close();
        // Message({message: '请求成功', type: 'success'});
      })
      .catch(err => {
        reject(err.data)
        // Loading.service(true).close();
        Message({message: '加载失败', type: 'error'});
      })
  });
}

vue 对axios get pust put delete封装的实例代码

brand.js

import { get,post,qspost,put,deletefn } from '../../utils/axios/axios'
 
 
 
export const getBrandList = data => post("/item/brand/list",data)
 
export const addBrand = data =>post("/item/brand",data);

Brand.vue

import {getBrandList,addBrand} from "../../api/item/brand";

vue 对axios get pust put delete封装的实例代码

以上就是本次介绍的全部相关知识点,感谢大家的学习和对三水点靠木的支持。

以上就是全部实例代码,感谢大家的学习和对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
JavaScript修改注册表实例代码
Jan 05 #Javascript
详解JavaScript修改注册表的方法
Jan 05 #Javascript
js判断非127开头的IP地址的实例代码
Jan 05 #Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 #Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 #Javascript
jQuery 选择器用法基础入门示例
Jan 04 #jQuery
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 #Javascript
You might like
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
理解javascript闭包
2015/12/15 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Python中list初始化方法示例
2016/09/18 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
python 贪心算法的实现
2020/09/18 Python
python3中确保枚举值代码分析
2020/12/02 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
业务员岗位职责
2013/11/16 职场文书
运动会广播稿100字
2014/01/11 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
篮球比赛策划方案
2014/06/05 职场文书
家长会欢迎标语
2014/06/24 职场文书
见习期个人总结
2015/03/05 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL