基于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 获得绝对,相对位置的坐标方法
Feb 09 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 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/24 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
google地图的路线实现代码
2009/08/20 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
Python中几个比较常见的名词解释
2015/07/04 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
python调用百度语音REST API
2018/08/30 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
班组长岗位职责
2014/03/03 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
学习党章心得体会2016
2016/01/15 职场文书
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS