未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

基础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方法及调用实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。


您可能感兴趣的文章:vue 里面使用axios 和封装的示例代码浅谈在Vue-cli里基于axios封装复用请求vue axios 二次封装的示例代码详解Vue 2.0封装axios笔记

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: SUAUTAUUTUCUVHead
tags: axios,let,res,params,uuid,options,error,return,session,function,fetch,reject,window,data
分页:12
转载请注明
本文标题:基于axios封装fetch方法及调用实例
本站链接:https://www.codesec.net/view/572151.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(72)