vue二次封装接口请求函数，统一管理请求函数，解决反向代理！

vue二次封装接口请求函数

1、二次封装axios

新建utils文件夹，在该文件夹下创建request.js文件

import axios from 'axios'
import qs from 'qs'
//创建实例
const request = axios.create({
    baseURL: '/conner',
    timeout: 5000
})

request.interceptors.request.use(function (config) {
    //解决接口 参数json 格式问题 
    if (config.method === 'post' && config.data) {
        config.data = qs.stringify(config.data)
    }
    return config
}, function (error) {
    return Promise.reject(error)
})

request.interceptors.response.use(function (response) {
    return response
}, function (error) {
    return Promise.reject(error)
})

export default request

ps：qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库，qs.parse()是将URL解析成对象的形式，qs.stringify()是将对象 序列化成URL的形式，以&进行拼接。

2、创建Api目录，将所有请求函数单独封装成函数导出

新建api文件夹，在该文件夹下创建index.js文件

import request from '@utils/request'

//请求商品分类
const fetchCates = (params = {}) => request.get('/shop/goods/category/all', {
    params
})
//首页轮播图
const fetchHomeBanner = (params = {}) => request.get('/banner/list', {
    params
})
//请求商品列表
// const fetchItems = (params = {}) => request.post('/shop/goods/list/v2', qs.stringify(params))
const fetchItems = (params = {}) => request.post('/shop/goods/list/v2', params)

export {
    fetchCates,
    fetchHomeBanner,
    fetchItems
}

组件中直接引入使用对应的接口函数调用即可，可以传入不同的参数*

3、在vue.config.js中配置反向代理

devServer: {
        port: 4000,
        open: true,
        proxy: {
            '/conner': {
                target: 'url',
                changeOrigin: true,
                pathRewrite: {
                    //路径重写
                    '^/conner': '/conner'
                }
            }
        }
    },
    /*
    
    接口请求 地址 需要以/conner开头 才会反向代理到target源
    路径重写： 定义/conner 真实请求时这个路径携不携带
    重要：真实请求地址是：target + 路径重写的值 + 请求path

    假设路径重写被编程‘’ 则/conner/a 真实请求地址是 url/a 
    
    注意：这里设置/conner开头 则request.js中baseUrl应当设置为/conner，否则反向代理并不成功

    */