关于axios

jiezi

6 年前

简介
axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
主要是用于向后台发起请求的，还有在请求中做更多是可控功能。
特点
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

安装
使用 npm:

$ npm install axios
使用 bower:

$ bower install axios
使用 cdn:

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() {}
})
},