基于axios封装fetch方法及调用实例


Posted in Javascript onFebruary 05, 2018

基础axios用法请看axios官网

//依赖于axios对私有ajax进行修改
import Qs from 'qs'
import axios from 'axios'
import router from 'router/index'
import {errorPrompt, loading, closeLoading} from 'util/util'
export const status = {
 SUCCESS: '100',
 NET_ERR: '101', // 网络连接异常,请稍候再试
 BIZ_ERR: '103', // 业务请求异常
 NO_AUTH: '104'
}
export function fetch(options) {
 return new Promise((resolve, reject) => {
 let instance = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 2000,
  headers: {
  // "tracecode": window.encodeURIComponent(JSON.stringify({"ua":"","cv":"20161230","token":"3dwo0onUUsPKVJcP8tk","os":"windows10","app":"kind","ws":"1*1","pkey":"f8caf7d7-a5d4-4710-b06f-28a922b6a467"}))
  "tracecode": commonBizHeader(isManager(options)),
  'Content-Type': 'application/x-www-form-urlencoded'
  },
  transformRequest: [function (data) {
  // Do whatever you want to transform the data
  let ret = ''
  for (let it in data) {
   ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  }
  return ret
  }]
 });
 instance.interceptors.request.use(function (response) {
  // 请求拦截
  loading();
  return response;
 }, function (error) {
  console.log('error 请求拦截 : ', error)
  return Promise.reject(error);
 });
 instance(options)
  .then(response => {
   const res = response.data;
   if (res.errorCode != status.SUCCESS) {
   switch (res.errorCode) {
    case status.NET_ERR: {
    errorPrompt(res.errorMsg)
    reject(res)
    break;
    }
    case status.BIZ_ERR: {
    errorPrompt(res.errorMsg)
    reject(res)
    break;
    }
    case status.NO_AUTH: {
    errorPrompt(res.errorMsg)
    let session = require("storejs")
    if (isManager(options)) { // 管理端
     session.remove("managerUserToken")
     router.push({path: '/manager/login'})
    } else {
     session.remove("clientUserToken")
     router.push({path: '/client/login'})
    }
    reject(res)
    break
    }
   }
   }
   closeLoading();
   resolve(res);
  }).catch(error => {
   closeLoading();
   errorPrompt('网络连接错误,请检查您的网络')
   console.log('error', error); // for debug
   reject(error);
  });
 });
}
function commonBizHeader (isManager) {
 let session = require("storejs");
 let params = {}
 params['ua'] = window.navigator.userAgent.toLowerCase()
 params['cv'] = '123456'
 params['ws'] = window.screen.height + '*' + window.screen.width
 params['token'] = "123456"
 params['os'] = window.navigator.appCodeName
 if (isManager) {
 params['token'] = session.get('managerUserToken') // 管理 - 用户令牌
 } else {
 params['token'] = session.get('clientUserToken') // 用户 - 用户令牌
 }
 params['app'] = 'kind'
 let UUID = session.get('pkey')
 if (!UUID) {
 UUID = getUUID()
 window.localStorage.setItem('pkey', UUID)
 }
 return encodeURIComponent(JSON.stringify(params))
}
function isManager(options) {
 return options && options.url && options.url.indexOf("/api/worker") != -1
}
/**
 * 获取UUID
 * @returns {string}
 */
export function getUUID() {
 let len = 32 // 32长度
 let radix = 16 // 16进制
 let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
 let uuid = []
 let i
 radix = radix || chars.length
 if (len) {
 for (i = 0; i < len; i++) {
  uuid[i] = chars[0 | Math.random() * radix]
 }
 } else {
 var r
 uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
 uuid[14] = '4'
 for (i = 0; i < 36; i++) {
  if (!uuid[i]) {
  r = 0 | Math.random() * 16
  uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]
  }
 }
 }
 return uuid.join('').toLowerCase()
}

这是在vue的项目中:在api中调用方法如下(react刚开始学,还在做简单demo)

import {fetch} from 'api/fetch'
export const callAuthCode = (userPhone) => {
 return fetch({
 url: '/api/auth/code',
 method: 'post',
 data: ({
  userPhone: userPhone,
 }),
 })
}

因为我们这边的后台要求严格区分get/post请求,所以封装的方法调用中必须带有method,如后台已经处理好,全部可进行post请求,则可以参照axios官网里面将方法全部改为.post

关于fetch方法的说明:主要进行封装了请求拦截,响应拦截,默认请求体由json格式转换form格式,当然,这些都是在axios官网里可以找到的,不过是集合下了而已

关于请求头部分请不要直接套用,这是我们这边后台要求特殊配置的,后台接口三端共用,必须区分是哪里在调用

以上这篇基于axios封装fetch方法及调用实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现树形二级菜单实例代码
Nov 20 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
js实现3D照片墙效果
Oct 28 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 #Javascript
JS中Map和ForEach的区别
Feb 05 #Javascript
完美解决axios跨域请求出错的问题
Feb 05 #Javascript
vue 页面加载进度条组件实例
Feb 05 #Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 #Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 #Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 #Javascript
You might like
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
js三种排序算法分享
2012/08/16 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
python定向爬取淘宝商品价格
2018/02/27 Python
python装饰器深入学习
2018/04/06 Python
Python3中的json模块使用详解
2018/05/05 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
实习生自荐信范文
2013/11/13 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
社区工作者先进事迹
2014/01/18 职场文书
财务管理专业求职信
2014/06/11 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
导游词之日月潭
2019/11/05 职场文书
详解SQL的窗口函数
2022/04/21 Oracle