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中getJSON在asp.net中的使用说明
Mar 10 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 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引用传值实例详解学习
2013/11/06 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
JS 控件事件小结
2012/10/31 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
python使用minimax算法实现五子棋
2019/07/29 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
建筑工程技术应届生自荐信
2013/09/27 职场文书
党员违纪检讨书
2014/02/18 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
党员承诺书范文2015
2015/04/27 职场文书
2019年大学推荐信
2019/06/24 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript