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

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

基础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.enOdFxaRcodeURIComponent(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('clientUserTokeOdFxaRn') // 用户 - 用户令牌

}

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官网里可以找到的，不过是集合下了而已

关于请求头部分请不要直接套用，这是我们这边后台要求特殊配置的，后台接口三端共用，必须区分是哪里在调用

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。