引言
首先Axios，一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
网络请求库无疑是项目开发中最基础的建设了，在这个前后端分离的时代，市面上有不少优秀的请求库，其中Axios就是优秀代表之一。
- 拦截请求和响应
- 转换请求数据和响应数据
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
- 支持 PromiseAPI
以上是axios的优秀点
axios使用
本文是基于Vue项目去使用Axios:
第一步安装 npm install axios 已经迈出了一步，打开我们的package.json文件发现已经安装成功，
接下来我们去具体实现功能：
1.配置请求基本信息
2.设置请求拦截器
3.设置请求响应器
实现以上三个方法
配置请求基本信息
//request.js
import axios from 'axios'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 20000
})
设置请求拦截器
在发送请求之前我们总得做一些事情：
- 是否需要token（如需要的话将每个请求携带token）
- 如果是get需要传递参数的话需要将特殊字符过滤掉
// request拦截器
service.interceptors.request.use(
config => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false
if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?'
for (const propName of Object.keys(config.params)) {
const value = config.params[propName]
var part = encodeURIComponent(propName) + '='
if (value !== null && typeof value !== 'undefined' && value !== '') {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
let params = propName
// let params = propName + '[' + key + ']'
var subPart = encodeURIComponent(params) + '='
url += subPart + encodeURIComponent(value[key]) + '&'
}
} else {
url += part + encodeURIComponent(value) + '&'
}
}
}
url = url.slice(0, -1)
config.params = {}
config.url = url
}
return config
},
error => {
console.log(error)
Promise.reject(error)
}
)
补充：
encodeURIComponent方法是js提供的一个方法，把字符串作为 URI 组件进行编码，该方法不会对 ASCII 字母和数字进行编码，主要作用是过滤掉特殊字符
设置请求响应器
当数据回来的时候，我们也得干一点事情：
- 判断登录状态
- 错误处理
import { Message, MessageBox, Notification } from 'element-ui'
import errorCode from '@/utils/errorCode'
// 响应拦截器
service.interceptors.response.use(
res => {
// 未设置状态码则默认成功状态
const code = Number(res.data.code) || 200
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default']
if (code === 401) {
MessageBox.confirm(
'登录状态已过期，您可以继续留在该页面，或者重新登录',
'系统提示',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('LogOut').then(() => {
location.href = 'https://www.atool.online/index'
})
})
} else if (code === 500) {
Message({
message: msg,
type: 'error'
})
return Promise.reject(new Error(msg))
} else if (code !== 200) {
Notification.error({
title: msg
})
return Promise.reject(msg)
} else {
return res.data
}
},
error => {
console.log('err' + error)
let { message } = error
if (message == 'Network Error') {
message = '后端接口连接异常'
} else if (message.includes('timeout')) {
message = '系统接口请求超时'
} else if (message.includes('Request failed with status code')) {
message = '系统接口' + message.substr(message.length - 3) + '异常'
}
Message({
message: message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default {
'401': '认证失败，无法访问系统资源',
'403': '当前操作没有权限',
'404': '访问资源不存在',
'default': '系统未知错误,请反馈给管理员'
}
项目中使用
import request from '@/utils/request'
// 登录方法
export function login(username, password, code, uuid) {
return request({
url: '/auth/admin/login',
method: 'post',
data: { username, password, code, uuid }
})
}
结尾
此时我们的网络库的基础版已经实现，把service进行一个导出，就可以在项目中使用了，这个版本基本可以满足日常项目的开发，如果需要其他设置可以另行添加。 扩展：
- axios取消重复请求
- axios无感token刷新
以上也是比较常见的场景，在本文注重实现基础版网络库，日后需要对以上的场景进行探索。完结撒花~😉
export default service
以上就是vue日常开发基础Axios网络库封装的详细内容，更多关于vue开发Axios网络库封装的资料请关注阿兔在线工具其它相关文章！
