vue中二次封装axios并统一处理loading
首页在我们项目的 utils 文件下创建一个 request 文件夹,然后在 request 文件下创建两个文件 index.js 跟 request.js。在到 utils -> request -> index.js 文件里。最后在我们的根目录下创建一个 api 文件夹来同统一管理api。最后的最后就可以在使用的地方尽情愉快的使用啦。在 request.js 文件中。有问题的地方评论区讨论。
·
关于vue中统一处理axios
每次在开发项目的时候都是需要统一处理请求的,我的项目中使用的是 axios
先在项目中引入 axios
npm: npm install axios
bower:bower install axios
yarn:yarn add axios
首页在我们项目的 utils 文件下创建一个 request 文件夹,然后在 request 文件下创建两个文件 index.js 跟 request.js
在 request.js 文件中
// request.js
import axios from 'axios' // 引入已经安装好的 axios
import { Toast } from 'vant' // 这里是引入的 vant 中的loading http://vant-contrib.gitee.io/vant/#/zh-CN
// 初次加载loading
const getLoading = () => {
Toast.loading({
forbidClick: true,
message: '加载中...',
duration: 0
})
}
// 去除loading
const removeLoading = () => {
Toast.clear()
}
// loadingNum 监听请求次数当并调用 getLoading 方法
let loadingNum = 0
const severaLmergeLoading = () => {
if (loadingNum === 0) {
getLoading()
}
loadingNum += 1
}
// 当所有请求结束后,去除整个loading
const endLoading = () => {
loadingNum--
if (loadingNum <= 0) {
loadingNum = 0
removeLoading()
}
}
// 创建 axios 实列
const service = axios.create({
baseURL: 'xxxx', // 地址
// `timeout` 指定请求超时的毫秒数。
// 如果请求时间超过 `timeout` 的值,则请求会被中断
timeout: 5000, // 默认值是 `0` (永不超时)
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 是否需要 loading
if (config.hideloading) {
severaLmergeLoading()
}
config.headers = {
// 自定义的一些操作,比如传 token 或者 Content-Type
}
return config
},
err => {
// 错误抛出
endLoading()
return Promise.reject(err)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
endLoading()
// 根据返回的做统一处理
const res = response.data
// 这里的 code 根据实际项目中的需求来,以下只是示列
// 错误
if(res.code === 0) {
.....
return Promise.reject(new Error('出错了'))
}
// 成功
if(res.code === 1) {
.....
return Promise.resolve(res)
}
},
err => {
endLoading()
// 错误抛出
return Promise.reject(err)
}
)
在到 utils -> request -> index.js 文件里
// index.js 文件
// 这里 get 跟 post 分了两个写可以合成一个
// 根据自己实际项目中情况添加需要的自定义参数
import request from './request'
/**
* get 请求
* @param {*} url api
* @param {*} params 参数
* @param {*} hideloading loading 动画
* @returns
*/
export const getAction = (url, params, hideloading = false) => {
return request({
url,
method: 'get',
params,
hideloading
})
}
/**
* post 请求
* @param {*} url api
* @param {*} data 参数
* @param {*} hideloading loading 动画
* @returns
*/
export const postAction = (url, data, hideloading = false) => {
return request({
url,
method: 'post',
data,
hideloading
})
}
最后在我们的根目录下创建一个 api 文件夹来同统一管理api
// api -> index.js
import { getAction, postAction } from '@/utils/request'
// 项目中的 api
export const getData = (e) => {
return getAction('xxx/xxxx', e, true)
}
最后的最后就可以在使用的地方尽情愉快的使用啦
import { getData } from '@/api'
export default {
mounted() {
this.queryList()
},
methods: {
async queryList() {
// const data = { ... } // 自定义参数
// getData().then(res => {
// console.log(res)
// })
// try {
// const res = await getData(data)
// console.log(res)
// } catch (error) {
// 异常处理
// console.log(error)
// } finally {
// 成功失败都返回
// }
}
}
}
有问题的地方评论区讨论
更多推荐
已为社区贡献3条内容
所有评论(0)