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中数组的相关知识
Jul 29 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
javascript中this指向详解
Apr 23 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
js 图片懒加载的实现
Oct 21 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将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
php eval函数用法总结
2012/10/31 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
浅析Jquery操作select
2016/12/13 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
django ajax发送post请求的两种方法
2020/01/05 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
普天C++笔试题
2016/03/20 面试题
《自然之道》教学反思
2014/02/11 职场文书
教师节寄语2015
2015/03/23 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
民主生活会意见
2015/06/05 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android