前言
最近在准备整理一个vue项目的架子,想换一种请求方式,之前是用回调写的。这个项目准备用一下 async/await 重新封装一下,网上找了一下,没啥喜欢的,所有准备自己搞一个。
各个文件
api.config.js
本地开发的时候需要使用反向代理,然后我就在这里配置了一下请求的bsaeUrl。
const isPro = Object.is(process.env.NODE_ENV, 'production')
let baseUrl = isPro? '' : 'api'
export {
baseUrl
}
fetch.js
封装一个函数,返回一个
new Promise
对象。
import axios from 'axios'
import { baseUrl } from './api.config'
export default function(url,params,methodType='GET'){
return new Promise((resolve, reject) => {
axios.request({
url:url,
method: methodType,
baseURL:baseUrl,
data:params,
timeout: 1000 * 60,
}).then(res=>{
if(res.data.code === 200){
resolve(res.data)
}
}).catch(err=>{
if(err.message.includes('timeout')){
// 请求超时
}
reject(err)
}).finally(()=>{
// 请求结束
})
})
}
我在这里改写了fetch方法,使用的时候很可能会造成困扰,建议还是修改一下,但我就是不想改啊。(/无奈)
api.js
请求的url和请求的类型被我写在这个里面,这样在页面上发请求的时候只需要调用暴露出去的方法就可以了,所有这里面全都是请求,建议写好注释。
import fetch from './fetch'
/**
* 测试get接口
* @param {*} id 测试数据得id
*/
export const test = (params)=> fetch('/base/test',params)
export const testPost = (params)=> fetch('/base/testPost',params,"POST")
注释我有好好写哈
about.vue
项目是使用vue-cli3直接创建的,页面还都没写,有个about.vue页面我就直接写在这个里面了,其实我不懒的。
- 单个请求
import { test, testPost } from "../server/api.js";
export default {
name: "about",
data() {
return {};
},
methods: {
async getData() {
try {
let resultP = await testPost({
data:{
id:'2'
}
})
console.log(resultP);
} catch (error) {
console.log(error );
}
}
}
};
注意一下async/await
的位置就好了,写法还是很简单的。
- 多个请求
import { test, testPost } from "../server/api.js";
export default {
name: "about",
data() {
return {};
},
methods: {
getData() {
Promise.all([
test({
id:'1'
}),testPost({
id:'2'
})]).then(res=>{
console.log(res)
})
}
}
};
因为返回的是 new Promise
所以直接适用Prosime.all
就可以了,res是返回的数据组成的数组。
结构
页面结构
├── server // 请求相关
│ ├── api.config.js
│ ├── fetch.js
│ ├── api.js
├── views // 页面
│ ├── about.vue // 关于
结语
应该还有没考虑到的地方,欢迎拍砖。