[JavaScript知识库]vue里面对axios的简单封装

封装

import axios from 'axios'
export function request(config) {
    const instance = axios.create({
        baseURL: '你的服务器ip',
        timeout: 5000,
    })
    // axios的拦截器
    // 请求时拦截
    instance.interceptors.request.use(config => {
        // console.log(config);
        // config处理完成之后记得要返回出去
        return config
    },err => {
        // 发送请求失败时
        console.log(err);
    })

    // 响应拦截
    instance.interceptors.response.use(res => {
        // console.log(res);
        // 同意的res处理完也要返回出去，不然就是被拦截下来了
        return res.data
    },err => {
        console.log(err);
    })
    return instance(config)
}

简单的使用

它返回出去了一个promise对象调用then进行网络请求的成功处理catch进行失败的处理

import {request} from "./request";

export function getHomeMultidata() {
    return request({
        url: '/home/multidata'
    })
}

export function getHomeGoods(type,page) {
    return request({
        url: '/home/data',
        params: {
            type,
            page
        }
    })
}