基于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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
axios post提交formdata的实例
Mar 16 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
微信小程序实现多行文字滚动
Nov 18 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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
js读写json文件实例代码
2014/10/21 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
Python FTP操作类代码分享
2014/05/13 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
Django admin组件的使用
2020/10/24 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
领导班子四风对照检查材料范文
2014/09/27 职场文书
汇报材料怎么写
2014/12/30 职场文书
学生保证书格式
2015/02/27 职场文书
工作自我评价范文
2015/03/05 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书