이번에는 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.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 요청을 엄격히 구분해야 하므로 캡슐화된 메서드 호출에는 메서드가 포함되어야 합니다. 배경이 처리되고 모든 게시물 요청이 가능하다면 다음을 참조하세요. axios 공식 웹사이트에서 모든 메소드를 .post로 변경합니다
가져오기 메소드 설명: 주로 요청 차단 및 응답 차단을 캡슐화합니다. 기본 요청 본문은 json 형식에서 양식 형식으로 변환됩니다. axios 공식 웹사이트이지만 요청 헤더 부분에 대해 직접 적용하지 마십시오. 이는 백엔드 인터페이스의 세 끝이 공유되는 부분입니다. . 이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트
기타관련 기사를 주목하세요!
JS는 호텔 숙박 비용을 자동으로 계산합니다위 내용은 Axios 캡슐화 가져오기 호출에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!