vue项目axios的使用与简单封装
vue,axios请求封装统一管理
·
1.前言
有朋友刚刚毕业项目经验不多,总是错误的使用axios来发送请求,整天在公司问东问西导致项目进度缓慢,所以这里把我自己的项目中使用的axios封装拿出来分享一下。
2.安装axios以及基本使用
// 安装
npm install axios -s
// 引入
import axios from 'axios'
// 使用
axios({
method: "GET",
url: "http://localhost:3000/api/getData"
}).then(response => {
console.log(response);
})
axios({
method: "POST",
url: "http://localhost:3000/api/postData",
data:{name:"xiaoming",age:18,params:"提交的数据。。。"}
}).then(response => {
console.log(response);
})
上面简单的展示了如何使用get来获取数据以及通过post来提交数据,当然,put,delete也是一样的,就不过多展示了。axios直接返回一个promise,所以可以直接在then里面接收到由后端服务返回的数据,下面展示的就是response对象的具体各项参数。
3.对axios进行封装
封装的本质就是为了减少代码重复书写,将可以复用的部分抽取出来,而axios的封装就是基于interceptors拦截器来进行的,对请求以及响应做相应的操作
请求拦截器,就是在请求发送之前对做一些统一处理比如对请求头做一些操作,对不同的方法进行不同的处理等等
// request拦截器
service.interceptors.request.use(
(config) => {
// config.headers["Sec-Fetch-Dest"] = "image"
// JWT鉴权处理
if (store.getters['user/token']) {
config.headers['Token'] = store.state.user.token
}
// 处理get请求
if (config.method=='get') {
// 在这里对get请求进行包装,比如传参数,比如参数加密或者携带默认参数
}
return config
},
(error) => {
return Promise.reject(error)
}
)
响应拦截器,就是对请求发送成功之后服务器的响应体做一定的操作,这里的代码主要是对各种的状态进行统一处理
// response拦截器
service.interceptors.response.use(
(response) => {
if (response.status == 200) {
const res = response.data
if (res.code == 200) {
return res
} else if (res.code == 401 || res.code == 403) {
store.dispatch('user/loginOut')
showError(res)
return Promise.reject(res)
}else {
showError(res)
return Promise.reject(res)
}
} else {
ElMessage({
message: '网络连接失败,请检查网络情况',
type: 'error',
})
return Promise.reject(res)
}
},
(error) => {
const badMessage = error.message || error
showError({ code:999, message: badMessage })
return Promise.reject(error)
}
)
然后项目中再将所有的api集中到一个地方进行管理,需要使用的时候再引入到页面
import { get, post, del, edit } from "@/utils/system/request"
export const user = {
list: (data) => get('/sys/user/list', data),
del: (data) => post('/sys/user/delete', data),
info: (data) => get('/sys/user/info/' + data),
save: (data) => post('/sys/user/save', data),
update: (data) => post('/sys/user/update', data),
}
import { user } from "@/api/sys"
const getUserList = async () => {
let { code, data } = await user.list()
userList.value = code == 200 ? data.list : []
}
到这里,就已经成功的完成了一个请求的调用了!
更多推荐
已为社区贡献1条内容
所有评论(0)