关于axios

简介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 serviceAPI使用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() {} }) },