优雅的使用axios发起请求
优雅的使用axios发起请求
小灰哥
Lv7
2019-10-29 17:31:58 评论 1 阅读 967 喜欢 0
使用Vue开发必然少不了axios,现在就分享下自己对axios的封装,使用起来更优雅
API模块目录
便于开发、维护,讲api模块单独提取出来,分config.js配置文件与api模块文件夹
axios/
--| config.js
--| api/
----| login.js
功能实现
config.js 文件(axios/目录)
// 引用axios
import axios from 'axios'
/**
* [http request 请求之前拦截器]
* 根据需求在config中添加对应的内容
*/
axios.interceptors.request.use(
config => {
config.headers.token = 'token123'
return config
},
error => {
return Promise.reject(error)
}
)
/**
* [返回状态判断(添加响应拦截器)]
* code == 200时then,否则catch
* @return
*/
axios.interceptors.response.use(
response => {
if (response.data && esponse.data.code !== 200) {
return Promise.reject(response)
}
return response
},
error => {
if (error.response && error.response.status === 401) {
// status === 401, 处理服务器返回错误码
}
return Promise.reject(error.response)
}
)
/**
* [deployUse 添加公共参数]
* @param {Obj} data 参数
* data.timestamp [时间戳]
* @return {Obj}
*/
function deployUse(data = {}) {
data.timestamp = new Date().getTime()
return data
}
/**
* [errorState 后台接口错误状态处理]
*/
function errorState(response) {
if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
return response.data
} else {
return {
status: -404,
msg: '网络异常'
}
}
}
/**
* [配置axios]
* @param {Obj} opts 配置
* opts.method 请求方式 [*必填]
* opts.baseURL axios默认url
* opts.url 请求url [*必填]
* opts.headers 请求headers
* @param {Obj} data 请求数据
* @return {Obj} res
*/
const timeout = 30 * 1000
const httpServer = (opts, data) => {
// 设置默认headers
let headers = {}
// http默认配置
let httpDefaultOpts = {
method: opts.method, // 必填
baseURL: opts.baseURL || process.env.VUE_APP_API,
url: opts.url, // 必填
timeout,
headers: Object.assign(headers, opts.headers)
}
// 根据请求方式,提交参数
if (opts.method === 'get') {
httpDefaultOpts.params = deployUse(data)
} else {
httpDefaultOpts.data = deployUse(data)
}
// 使用Promise发起axios请求
let promise = new Promise((resolve, reject) => {
axios(httpDefaultOpts)
.then(res => {
resolve(res.data)
})
.catch(response => {
errorState(response)
reject(response)
})
})
return promise
}
export default {
httpServer
}
login.js 文件(axios/api/目录)
// 创建一个api示例
// 引用封装axios配置文件
import axiosApi from '@/axios/config'
/*
* 创建一个用户登录接口
* @param {Obj} params 接口参数
*/
export const userLogin = params => {
return axiosApi.httpServer(
{
url: '/api/login',
method: 'post'
},
params
)
}
axios封装好了,并创建了一个接口实例!
使用示例
login.vue页面文件,在页面中引用api/login.js
import { userLogin } from '@/axios/api/login'
userLogin({
username: 'test',
pw: '111111'
}).then(res => {
// 请求成功
}).catch(err => {
// 请求失败
})
接口状态相关的已经在拦截器处理了,获取的数据可以放心大胆的使用,不用担心没有数据出现异常等情况了!
分类: 技术分享
原创文章