基于axios封裝fetch方法及調(diào)用實(shí)例
基礎(chǔ)axios用法請(qǐng)看axios官網(wǎng)
//依賴于axios對(duì)私有ajax進(jìn)行修改
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', // 網(wǎng)絡(luò)連接異常,請(qǐng)稍候再試
BIZ_ERR: '103', // 業(yè)務(wù)請(qǐng)求異常
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) {
// 請(qǐng)求攔截
loading();
return response;
}, function (error) {
console.log('error 請(qǐng)求攔截 : ', 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('網(wǎng)絡(luò)連接錯(cuò)誤,請(qǐng)檢查您的網(wǎng)絡(luò)')
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長(zhǎng)度
let radix = 16 // 16進(jìn)制
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的項(xiàng)目中:在api中調(diào)用方法如下(react剛開始學(xué),還在做簡(jiǎn)單demo)
import {fetch} from 'api/fetch'
export const callAuthCode = (userPhone) => {
return fetch({
url: '/api/auth/code',
method: 'post',
data: ({
userPhone: userPhone,
}),
})
}
因?yàn)槲覀冞@邊的后臺(tái)要求嚴(yán)格區(qū)分get/post請(qǐng)求,所以封裝的方法調(diào)用中必須帶有method,如后臺(tái)已經(jīng)處理好,全部可進(jìn)行post請(qǐng)求,則可以參照axios官網(wǎng)里面將方法全部改為.post
關(guān)于fetch方法的說明:主要進(jìn)行封裝了請(qǐng)求攔截,響應(yīng)攔截,默認(rèn)請(qǐng)求體由json格式轉(zhuǎn)換form格式,當(dāng)然,這些都是在axios官網(wǎng)里可以找到的,不過是集合下了而已
關(guān)于請(qǐng)求頭部分請(qǐng)不要直接套用,這是我們這邊后臺(tái)要求特殊配置的,后臺(tái)接口三端共用,必須區(qū)分是哪里在調(diào)用
以上這篇基于axios封裝fetch方法及調(diào)用實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗(yàn)
VuePress為每一個(gè)由它生成的頁面提供預(yù)加載的html,不僅加載速度極佳,同時(shí)對(duì)seo非常友好。這篇文章主要介紹了基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗(yàn),需要的朋友可以參考下2018-04-04
如何在Vue中實(shí)現(xiàn)Svelte的Defer Transition
這篇文章主要介紹了如何在Vue中實(shí)現(xiàn)Svelte的Defer Transition,幫助大家更好的理解和學(xué)習(xí)使用vue,感興趣的朋友可以了解下2021-04-04
vue實(shí)現(xiàn)的網(wǎng)易云音樂在線播放和下載功能案例
這篇文章主要介紹了vue實(shí)現(xiàn)的網(wǎng)易云音樂在線播放和下載功能,結(jié)合具體實(shí)例形式分析了網(wǎng)易云音樂相關(guān)接口調(diào)用與操作技巧,需要的朋友可以參考下2019-02-02
Vue項(xiàng)目中input框focus時(shí)不調(diào)出鍵盤問題的解決
這篇文章主要介紹了Vue項(xiàng)目中input框focus時(shí)不調(diào)出鍵盤問題的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
Vue3的setup在el-tab中動(dòng)態(tài)加載組件的方法
公司某項(xiàng)目需求在頁面顯示的組件是根據(jù)角色變化而變化的,怎么實(shí)現(xiàn)這個(gè)效果呢,下面小編給大家介紹下Vue3的setup在el-tab中動(dòng)態(tài)加載組件的方法,需要的朋友可以參考下2022-11-11

