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 相关文章推荐
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
swiper自定义分页器使用方法详解
Sep 14 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
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 CURL获取cookies模拟登录的方法
2013/11/04 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
javascript的内存管理详解
2013/08/07 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Python中的localtime()方法使用详解
2015/05/22 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
深入理解Python异常处理的哲学
2019/02/01 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python反编译学习之字节码详解
2019/05/19 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
个人求职简历的自我评价范文
2013/10/09 职场文书
应届生法律求职信
2013/10/22 职场文书
考博专家推荐信模板
2013/12/02 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
质量承诺书格式范文
2015/04/28 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
python源码剖析之PyObject详解
2021/05/18 Python
小程序自定义轮播图圆点组件
2022/06/25 Javascript