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,否则反向代理并不成功

    */
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值