阅读 20

vue中封装的请求

前言

最近在准备整理一个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 // 关于

结语

应该还有没考虑到的地方,欢迎拍砖。

关注下面的标签,发现更多相似文章
评论