vue 封装 axios

首先在vue项目src中建一个network（随意取）文件夹，里边两个文件，分别是request.js,home.js
home.js对应着在哪一个模块中发送请求，这里home.js就代表在home页面中发送的请求，其他页面请求可以另起文件名

request.js如下

import axios from 'axios'

export function request(config){
        const instance = axios.create({
            // baseURL:'http://123.207.32.32:8000',
            baseURL:'http://152.136.185.210:7878/api/m5',
            timeout:5000
        })
        

        //axios拦截器
        // axios.interceptors.request.use()//全局拦截

        //局部拦截
        instance.interceptors.request.use(config =>{
            return config
        },err => {
            // console.log(err);
        })

        instance.interceptors.response.use(res => {
            return res.data//只返回data数据
        },err => {
            // console.log(err);
        })
        
        return instance(config)//内部就是promise的形式
}

home.js如下

import {request} from './request'

export function getHomeMultidata(){
    return request({
        url:'接口'
    })
}
export function getHomeGoods(type,page){
    return request({
        url:'接口',
        params:{//参数
            type:type,
            page:page
        }
    })
}

这样在具体的发送请求中，就可以直接调用home.js中写的请求函数了（注意：文件引入要正确）