简介
axios是一个基于 promise 的 HTTP 库,能够用在浏览器和 node.js 中
主如果用于向背景提议要求的,另有在要求中做更多是可控功用。
特性
从浏览器中建立 XMLHttpRequests
从 node.js 建立 http 要求
支撑 Promise API
阻拦要乞降相应
转换要求数据和相应数据
作废要求
自动转换 JSON 数据
客户端支撑防备 XSRF
装置
运用 npm:
$ npm install axios
运用 bower:
$ bower install axios
运用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
运用
import axios from 'axios'
import router from '../router/index'
import Message from 'ant-design-vue/es/message'
import Cookies from 'js-cookie'
const service = axios.create({
baseURL: '/api', // 一致要求途径前缀
timeout: 15000// 要求超时时刻
})
service.interceptors.request.use(config => {
let sessionId = Cookies.get('X-SESSION-ID') || ''
if (sessionId) {
config.headers['X-SessionId'] = sessionId // 让每一个要求照顾自定义token 请依据实际情况自行修正
}
return config
}, err => {
Message.error('要求超时')
return Promise.reject(err)
})
// http response 阻拦器
service.interceptors.response.use(response => {
const data = response.data
// 依据返回的code值来做差别的处置惩罚(和后端商定)
switch (data.code) {
case 401:
// 未登录 消灭已登录状况
router.push('/login')
return Promise.reject(new Error('401'))
case 403:
// 没有权限
if (data.message !== null) {
Message.error(data.message)
} else {
Message.error('未知毛病')
}
return Promise.reject(new Error('未知毛病'))
case 500:
// 毛病
if (data.message !== null) {
Message.error(data.message)
} else {
Message.error('未知毛病')
}
// return Promise.reject(new Error('未知毛病'))
return Promise.reject(data.message)
default:
return data
}
}, (err) => { // 这里是返回状况码不为200时刻的毛病处置惩罚
Message.error(err.toString())
return Promise.reject(err)
})
export default service
API运用
import request from '@/utils/request'
// 所属地区
export function getListByGroupStartAdminArea () {
return request({
url: '/area/getListByGroupStartAdminArea'
})
}
// 直升机信息删除
export function deleteCopter (data) {
return request({
url: `/copter/deleteCopter`,
method: 'post',
data
})
}
页面运用
// 猎取地区列表
_getListByGroupStartAdminArea () {
getListByGroupStartAdminArea().then(res => {
this.options = res.payload
})
},
// 删除直升机信息
handleDelete(record) {
let copter = this
this.$confirm({
title: '直升机信息删除',
content: '请确认是不是将此直升机删除?',
okText: '肯定',
cancelText: '作废',
onOk() {
deleteCopter({
id: record
}).then(res => {
copter.$message.error('删除胜利!')
copter._getCopterList()
})
},
onCancel() {}
})
},