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 // 关于

结语

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