基于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 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
layui对工具条进行选择性的显示方法
Sep 19 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数组去重复数据示例
2014/02/25 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
实例讲解React 组件
2020/07/07 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
python共享引用(多个变量引用)示例代码
2013/12/04 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python numpy格式化打印的实例
2018/05/14 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
打架检讨书100字
2014/01/19 职场文书
见习报告怎么写
2014/10/31 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
Python天气语音播报小助手
2021/09/25 Python