아래에서는 fetch 메소드를 캡슐화하고 Axios를 기반으로 호출하는 예를 공유하겠습니다. 이는 좋은 참조 값을 가지며 모든 사람에게 도움이 되기를 바랍니다.
기본적인 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를 배우기 시작했고, 아직도 간단한 작업을 하고 있습니다. 데모)
import {fetch} from 'api/fetch' export const callAuthCode = (userPhone) => { return fetch({ url: '/api/auth/code', method: 'post', data: ({ userPhone: userPhone, }), }) }
여기 있습니다. 백그라운드에서는 get/post 요청을 엄격하게 구분해야 하므로 캡슐화된 메소드 호출에 메소드가 포함되어야 합니다. 백그라운드가 처리되고 모든 post 요청이 가능하다면 axios 공식을 참고하세요. 모든 방법을 .post로 변경하는 웹사이트
가져오기 방법 설명: 주로 요청 차단 및 응답 차단을 캡슐화합니다. 기본 요청 본문은 json 형식에서 양식 형식으로 변환됩니다. 물론 이러한 내용은 axios 공식 웹사이트에서 찾을 수 있습니다. , 요청 헤더 부분을 요청하지 마세요. 이는 백엔드 인터페이스의 세 끝이 공유되는 부분입니다. 위의 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
JS의 명령 패턴 개념 및 사용법(자세한 튜토리얼)WeChat 애플릿에서 Promise를 사용하여 콜백을 구현하는 방법은 무엇입니까?
npm을 사용하여 Electron을 설치하지 못했습니다
위 내용은 axios를 사용하여 fetch 메소드를 캡슐화하고 호출합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!