详解vue中axios的使用与封装


Posted in Javascript onMarch 20, 2019

分享下我自己的axios封装
axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理

当然首先是npm安装axios 很简单$ npm install axios --save
在src下新建文件夹 service / index.js

接着上代码

import axios from 'axios';
import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示
import router from '../router'

// 默认超时设置
axios.defaults.timeout = 50000;

// 相对路径设置
axios.defaults.baseURL ='';

//http request 拦截器
axios.interceptors.request.use(
 config => {
  // 获取token
  const token = localStorage.getItem('cc_token');
  // 设置参数格式
  if(!config.headers['Content-Type']){
   config.headers = {
    'Content-Type':'application/json',
   };
  }
  // 添加token到headers
  if(token){
   config.headers.token = token
  }
  // 鉴权参数设置
  if(config.method === 'get'){
    //get请求下 参数在params中,其他请求在data中
   config.params = config.params || {};
   let json = JSON.parse(JSON.stringify(config.params));
   //一些参数处理
  }else{
   config.data = config.data || {};
   //一些参数处理
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 }
);

以上请求之前的一些处理就完成了
下面是获得返回的一些处理

//http response 拦截器
axios.interceptors.response.use(
 response => {
  //一些统一code的返回处理
  if(response.data.code === 501){
   // 登录验证
   //做了个示例跳转项目中登录,并记录下相对路径
   router.push({
    name:'login',//从哪个页面跳转
    query:{
     retUrl:window.location.href.split('#')[1] || '',
     is_new_user_url:1
    }
   })
  }
  return response;
 },
 error => {
  return Promise.reject(error)
 }
);

接着把所有请求类型都做下简单封装

/**
 * 封装get方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url,params={}){
 return new Promise((resolve,reject) => {
  axios.get(url,{
   params:params
  })
   .then(response => {
    if(response.data.code === 200){
    //返回成功处理 这里传的啥 后续调用的时候 res就是啥
     resolve(response.data.data);//我们后台所有数据都是放在返回的data里所以这里统一处理了
    }else{
    //错误处理
     Toast(response.data.msg)
    }
   })
   .catch(err => {
    reject(err);
    let message = '请求失败!请检查网络';
    //错误返回
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.post(url,data)
   .then(response => {
    if(response.data.code === 200){
     resolve(response.data.data);
    }else{
     Toast(response.data.msg)
    }
   },err => {
    reject(err);
    let message = '请求失败!请检查网络';
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

/**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.patch(url,data)
   .then(response => {
    if(response.data.code === 200){
     resolve(response.data.data);
    }else{
     Toast(response.data.msg)
    }
   },err => {
    reject(err);
    let message = '请求失败!请检查网络';
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.put(url,data)
   .then(response => {
    if(response.data.code === 200){
     resolve(response.data.data);
    }else{
     Toast(response.data.msg)
    }
   },err => {
    reject(err);
    let message = '请求失败!请检查网络';
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

export function del(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.delete(url,data)
   .then(response => {
    if(response.data.code === 200){
     resolve(response.data.data);
    }else{
     Toast(response.data.msg)
    }
   },err => {
    reject(err);
    let message = '请求失败!请检查网络';
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

好了 主要的文件编辑好 然后在service中新建api.js文件并引入对应组件方法

import Vue from 'vue';
import {post,fetch,patch,put,del,upload,ret2} from './index'
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;
Vue.prototype.$del=del;

接着就可以开始写各个API方法了

//也可以不需要
const _baseUrl=process.env.API_URL;//这里我在项目配置文件里面设置了相对路径
//登录方法
const loginURL = `${_baseUrl}api/admin/login`;
export const loginApi = function(json) {
 return Vue.prototype.$post(loginURL,{"username":json.username,"passwd":json.password})
};
//修改账号信息RESTful
const editAdminUrl = `${_baseUrl}api/admin/user/info`;
export const editAdminListApi = function (id,json) {
 return Vue.prototype.$put(`${editAdminUrl}/${id}`,json)
};
//等等...

最后是使用,非常简单方便,在vue文件中引入并使用

import { loginApi ,editAdminListApi } from "../../service/api";
  export default {
    methods:{
      //登录
      login(){
        let json = {
          userName:'xx',
          password:'xx'
        }
        loginApi().then(res=>{
          console.log(res)
        })
      },
      // RESTful 修改信息
      editAdminList(){
        let id = 1;
        let json = {name:11};
        editAdminListApi(id,json).then(res=>{
          console.log(res)
        })
      }
    }
  }

使用方便简洁。

以上所述是小编给大家介绍的vue中axios的使用与封装详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
javascript数组去重方法总结(推荐)
Mar 20 #Javascript
浅谈JavaScript面向对象--继承
Mar 20 #Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 #Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 #Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 #Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 #Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 #Javascript
You might like
php防盗链的常用方法小结
2010/07/02 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
php生成QRcode实例
2014/09/22 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
python根据txt文本批量创建文件夹
2020/12/08 Python
python自动点赞功能的实现思路
2020/02/26 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
什么是属性访问器
2015/10/26 面试题
生产车间主任的个人自我鉴定
2013/10/25 职场文书
自荐信格式技巧有哪些呢
2013/11/19 职场文书
党员岗位承诺书
2014/03/25 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
感恩教师主题班会
2015/08/12 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android