Home >Web Front-end >JS Tutorial >Detailed explanation of axios encapsulation fetch call
This time I will bring you a detailed explanation of the axios encapsulated fetch call. What are the precautions for axios encapsulated fetch? The following is a practical case, let's take a look.
For basic axios usage, please see the axios official website
//依赖于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() }This is in the vue project: the calling method in the api is as follows (react has just started I am still doing a simple demo)
import {fetch} from 'api/fetch' export const callAuthCode = (userPhone) => { return fetch({ url: '/api/auth/code', method: 'post', data: ({ userPhone: userPhone, }), }) }Because our backend requires strict distinction between get/Explanation on the fetch method: It mainly encapsulates request interception and response interception. The default request body is converted from json format. form format, of course, these can be found on the axios official website, but they are just collected. Please do not apply the request header directly. This is a special configuration required by our backend, and the backend interface Three terminals are shared, and it is necessary to distinguish where to call I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website
Other
related articles!JS automatically calculates hotel accommodation costs
The effect of displaying the loading circle before the picture is loaded
The above is the detailed content of Detailed explanation of axios encapsulation fetch call. For more information, please follow other related articles on the PHP Chinese website!