详解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 相关文章推荐
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
pm2启动ssr失败的解决方法
2019/06/29 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
Python使用PIL模块生成随机验证码
2017/11/21 Python
python 把列表转化为字符串的方法
2018/10/23 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
PHP面试题大全
2015/10/16 面试题
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
继承权公证书
2014/04/09 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
付款委托书范本
2014/10/05 职场文书
离婚起诉书范本
2015/05/18 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
优秀大学生申请书
2019/06/24 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python