- 相信大家在组织大型项目的时候都不会直接去使用原生的请求,哪怕是axios,那样无论修改起来还是使用起来都不够方便
- 在
携带token
响应拦截
更换服务器地址
等方面,封装请求具有明显优势 - 话不多说 直接开写
请求封装
- 逐步分析版
// 引入axios
import axios from 'axios'
const service = axios.create({
// 服务器地址 我的配置方式 可以在 .env.development(开发环境) .env.production(生产环境)两个文件中进行配置
baseURL: process.env.VUE_APP_BASE_API,
// baseURL: "www.xxx.com", 如果不使用上面的方式 你大可直接以字符串的形式配置
// 请求超时时间 如果服务器不是很快 尽可能设置的大一些
timeout: 5000
})
// 请求拦截器 (对请求发送之前的阶段进行拦截 执行此方法后继续执行)
service.interceptors.request.use(
//成功回调
config => {
// 这里可以修改请求的很多东西 比如请求方法 你可以打印config尝试一下
// 我的token存在了sessionStorage 但不是每个人都这么做 需要你根据自己的方式进行判断
if (sessionStorage.getItem('login_token')) {
// 具有token的情况下 对请求头(headers)增加token字段 值为保存好的token
config.headers['token'] = sessionStorage.getItem('login_token')
}
// 将请求返回 继续执行
return config
},
// 失败回调 抛出错误
error => {
console.log(error);
return Promise.reject(error)
}
)
// 响应拦截器 (请求发送到服务器后 返回响应数据 对响应数据传递到页面之前进行响应拦截)
service.interceptors.response.use(
//成功回调
response => {
// 首先取其中的data出来 因为原始的 response 中大多数据用不到 多数情况下data中才是要用到的东西
const res = response.data;
// 对code进行判断 视自己情况而定
if(res.code === 203){
// 我的203指的是未登录 你可以参考我的上一篇文章 使其直接退回到登录页面
// 这里的操作只是返回错误信息
return Promise.reject(new Error('未登录'))
}else if(res.code !== 200) {
// 返回错误信息 (注意 res.message 是我的错误信息 具体错误信息的字段名视你的后端情况而定)
return Promise.reject(new Error(res.message || 'Error'))
} else {
// 其他情况下(code==200) 直接返回数据即可
return res
}
},
// 失败回调 抛出错误
error => {
console.log('err' + error)
return Promise.reject(error)
}
)
// 暴露封装对象
export default service
- 方便复制版 大佬直接从这里copy
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
service.interceptors.request.use(
config => {
if (sessionStorage.getItem('login_token')) {
config.headers['token'] = sessionStorage.getItem('login_token')
}
return config
},
error => {
console.log(error);
return Promise.reject(error)
}
)
service.interceptors.response.use(
response => {
const res = response.data;
if(res.code === 203){
return Promise.reject(new Error('未登录'))
}else if(res.code !== 200) {
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error)
return Promise.reject(error)
}
)
export default service
请求方法封装
// 首先导入上面封装好的js文件
import request from './request'
// 直接在导出对象中定义方法
export default {
Login(data) {
return request({
url: '/login',
method: 'post',
data
})
},
xxx(){
以此类推.....
}
}
使用
- 示例在Vue项目中调用
// 可以这样导入 或者直接在main.js中挂载到vue对象
import ApiList from "../../util/ApiList";
export default {
name: "about",
created() {
// 直接调用即可
ApiList.Login({username:"xxx",password:"xxxx"}).then(res => {
this.xxx = res
})
}
}
- 挂载方法
main.js
import ApiList from "./util/ApiList";
Vue.prototype.$api = ApiList;
xx.vue
this.$api.Login({username:"xxx",password:"xxxx"}).then(res => {
this.xxx = res
})
如果对您有帮助 三连支持 下期再见
下期预告
- Uniapp的请求封装
- 微信小程序的请求封装