封装两种习惯使用request

前言

最近在学习Vue3，现在来说一下自己的学习感受，并且分享一些小知识点。

可能这些知识点并不是那么属于Vue3的知识范畴，但是这是我在学习过程中遇到并且记录下来的，对于我而言，是Vue3让我遇到了这些知识，哈哈哈哈，我就这么归类辣！

感想

这次使用的是Vite，之前都是用的vue-cli，Vite使用起来就一个字，快！

认真的去做一个自己的全栈项目，所以能封装起来用的地方，都尽量去封起来了，减少以后的代码量。

后端使用的是koa，也是第一次自己尝试去写后端。等这个项目写完，会继续分享一些踩坑小技巧的。

开始了，奇奇怪怪的小知识

封装两种习惯使用request

我们平时封装请求的时候，一般都会结合自己习惯来封装，冷不丁换人封装的时候，使用起来就非常不舒服，我问了问我的小伙伴们，大都是习惯以下这两种方式，所以我就对axios进行了封装，使他能够满足我们的使用习惯。

this.$request({ obj })

将参数用一个对象的方式进行解构。

this.$request({
      methods: 'get',
      url: '/login',
      data:{
        name:'Ned'
      }
    }).then((res)=>{
      console.log(res)
    })

封装如下

/**
 * axios二次封装
 */
import axios from 'axios'
import config from './../config'
import router from './../router';
import { ElMessage } from 'element-plus'

const TOKEN_INVALID = 'Token认证失败，请从新登陆'
const NETWORK_ERROR = '网络请求异常，请稍后重试'

// 创建axios实例对象，添加全局配置
const service = axios.create({
     baseURL:config.baseApi,
     timeout:8000
})

// 请求拦截器
service.interceptors.request.use((req) => {
    // to do
    const headers = req.headers
    if(!headers.Authorization) headers.Authorization = 'Bear token'
    return req
})

// 响应拦截器
service.interceptors.response.use((res) => {
    // to do
    /**
     * 注意状态码一共有两个
     * 一为http状态码
     * 二为接口返回状态码
     */
    const { code, data, msg } = res.data
    if(code === 200){
        return data
    }else if(code === 40001){
        ElMessage.error(TOKEN_INVALID)
        setTimeout(() => {
            router.push('/login')
        }, 15000);
        return Promise.reject(TOKEN_INVALID)
    }else{
        ElMessage.error(msg || NETWORK_ERROR)
        return Promise.reject(msg || NETWORK_ERROR)
    }
})

/**
 * 请求核心函数
 * @param {*} options  请求配置
 */
function request(options){
    // 判断get/post
    options.method = options.method || 'get'
    // 防止有时候写了GET
    if(options.method.toLowerCase() === 'get'){
        // 如果是get就将data直接赋值给params
        // 类型转换
        options.params = options.data;
    }
    if(config.env === 'prod'){
        service.defaults.baseURL = config.baseApi
    }else{
        service.defaults.baseURL = config.mock ? config.mockApi:config.baseApi
    }
    return service(options)
}

export default request

this.$request.get/post('/api',{ obj })

将get/post用.的方式取出，一个参数是接口路径，另一个参数是数据对象。

this.$request.get('/login',{name:Ned}).then((res)=>{
      console.log(res)
    })

在上一步的封装上，支持这种习惯

增加如下：

['get','post','put','delete','patch'].forEach((item)=>{
    request[item] = (url,data,options) =>{
        return request({
            url,
            data,
            method:item,
            ...options
        })
    }
})

写在最后

要一直在路上呀！加油！

点个赞，一起努力加油吧♥