详解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获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
微信小程序实现人脸识别
May 25 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 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实现cookie加密的方法
2015/03/10 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
js活用事件触发对象动作
2008/08/10 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
javascript时间函数大全
2014/06/30 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python常用知识梳理(必看篇)
2017/03/23 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
Python GUI编程完整示例
2019/04/04 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python中metaclass原理与用法详解
2019/06/25 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
怎么快速自学python
2020/06/22 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
申报职称专业技术个人的自我评价
2013/12/12 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
2014年人事部工作总结
2014/12/03 职场文书
团员年度个人总结
2015/02/26 职场文书
2015入党个人自传范文
2015/06/26 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
python实现的web监控系统
2021/04/27 Python