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 // 關於

結語

應該還有沒考慮到的地方，歡迎拍磚。