基于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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 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
php 分页原理详解
2009/08/21 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
车间主管岗位职责
2013/11/14 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
浅谈Redis的事件驱动模型
2022/05/30 Redis