vue脚手架中，全局封装axios，让使用过程中更方便，更加容易管理各种api接口
一、axios封装——http.js
import { axios } from './request'
// get 请求
const get = function (url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.data)
})
})
}
// POST 请求
const post = function (url, data) {
return new Promise((resolve, reject) => {
axios.post(url, data).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.data)
})
})
}
// PUT 请求
const put = function (url, data) {
return new Promise((resolve, reject) => {
axios.put(url, data).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.data)
})
})
}
// DELETE 请求
const del = function (url, data) {
return new Promise((resolve, reject) => {
axios.delete(url, data).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.data)
})
})
}
export default { get, post, put, del }
二、请求拦截器与响应拦截器——request.js
// 引入 axios
import axios from 'axios'
// axios 配置的请求根路径
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'xx' : 'xx'
// 请求超时
axios.defaults.timeout = 60000
// axios 请求拦截器
axios.interceptors.request.use(config => {
// 为请求头添加 token
config.headers.Authorization = localStorage.getItem('token')
return config
}, error => {
return Promise.reject(error)
})
// axios 响应拦截器
axios.interceptors.response.use(response => {
switch (response.data.code) {
// ...
}
return response
}, err => {
return Promise.reject(err)
})
export { axios }
