vuejs의 저자인 You Yuxi가 더 이상 vue-resource를 유지하지 않고 모든 사람에게 axios를 사용하여 시작하도록 권장한다는 발표를 통해 axios는 점점 더 많은 사람들에게 알려졌습니다. 이 글은 주로 Vue를 기반으로 Axios를 구성하는 단계를 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분과 공유하고 참고할 수 있기를 바랍니다.
axios 소개
axios는 브라우저 및 nodejs를 위한 Promise 기반 HTTP 클라이언트입니다. 자체적으로는 다음과 같은 특징이 있습니다.
Ajax 요청은 프로젝트 개발에 없어서는 안 될 요소입니다
일부 Ajax 요청은 로딩이 필요하지 않거나 요청 시간이 일정 시간 미만인 경우 로딩이 표시되지 않습니다
import Vue from 'vue' import axios from 'axios' //项目的一些环境配置参数,读取host import config from '@/config' //vuex状态管理,这里主要进行对全局loading的控制 import store from '@/store' //vue-router对相应状态码的页面操作(router实例) import router from '@/router' //console对应封装 import { log } from '@/utils'
// 加载最小时间 const MINI_TIME = 300 // 超时时间(超时时间) let TIME_OUT_MAX = 5000 // 环境value let _env = process.env.NODE_ENV // 请求接口host let _apiHost = config.api // 请求组(判断当前请求数) let _requests = []
일반적으로 프로젝트의 루트 호스트와 Content-Type은 통합되어 있습니다. axios Unified 구성을 위해 수행하십시오(이 백엔드에 formData 형식의 양식, 즉 content-type='application/x-www-form-urlencoded;charset=utf-8' 데이터가 필요한 경우 요청 데이터를 직렬화해야 함) 즉, 처리 및 전송을 위해 qs 라이브러리 qs.stringify를 도입하는 것입니다)
axios.defaults.headers.common['Content-Type'] = 'application/json' axios.defaults.baseURL = _apiHost
/** * 添加请求,显示loading * @param {请求配置} config */ function pushRequest(config) { log(`${config.url}--begin`) _requests.push(config) Vue.$vux.loading.show({ text: 'Loading' }) store.dispatch('loading') } /** * 移除请求,无请求时关闭loading * @param {请求配置} config */ function popRequest(config) { log(`${config.url}--end`) let _index = _requests.findIndex(r => { return r === config }) if (_index > -1) { _requests.splice(_index, 1) } if (!_requests.length) { Vue.$vux.loading.hide(0) store.dispatch('loading', false) } }
다음으로 위 준비 사항에 따라 axios가 처리됩니다. /**
* 请求地址,请求数据,是否静默,请求方法
*/
export default (url, data = {}, isSilence = false, method = 'POST') => {
let _opts = { method, url }
//通用数据的合并(token)
let _data = Object.assign({}, data, { token: store.getters.token })
const _query = {}
for (let _key in _data) {
if (_data.hasOwnProperty(_key) && _data[_key] !== '') {
_query[_key] = _data[_key]
}
}
//axios实例请求定时器ID
let _timer = null
//判断请求类型
if (method.toLocaleUpperCase() === 'POST') {
_opts.data = _query
} else {
_opts.params = _query
}
//返回一个promise
return new Promise((resolve, reject) => {
//实例化axios
const _instance = axios.create({
timeout: TIME_OUT_MAX
})
//定义请求的唯一标识
let _random = { stamp: Date.now(), url: `${_apiHost + url}` }
//判断是否静默(静默的话就不加入请求标识队列,不是则申明此请求实例的定时器)
if (!isSilence) {
_timer = setTimeout(() => {
pushRequest(_random)
}, MINI_TIME)
}
//axios实例发送当前请求
//请求完成:1、取消当前请求的定时器;2、在当前请求标识队列中移除当前标识;
_instance(_opts) .then(res => { let responseData = res.data clearTimeout(_timer) popRequest(_random) resolve(res.data) }) .catch(res => { let _response = res.response let _message = null clearTimeout(_timer) popRequest(_random) switch (_response.status) { case 404: _message = '404,错误请求' break case 401: router.push({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) _message = '未授权' break case 403: _message = '禁止访问' break case 408: _message = '请求超时' break case 500: _message = '服务器内部错误' break case 501: _message = '功能未实现' break case 503: _message = '服务不可用' break case 504: _message = '网关错误' break default: _message = '未知错误' } if (!isSilence) { Vue.$vux.toast.show({ text: _response.data && _response.data.error ? _response.data.error : _message, type: 'warn', width: '10em' }) } reject(res) }) }) }
관련 권장 사항:
Axios 인터페이스 요청 도구 분석을 구축하는 VueJs 정보
axios에서 메소드 가져오기 및 게시에 대한 간략한 소개
위 내용은 vue에서 axios를 구성하는 단계의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!