前端vue项目之axios封装

1、request.js

import axios from 'axios'

export function request(config) {
    // 1.创建axios的实例
    const instance = axios.create({
        baseURL: baseURL,//api的baseurl
        timeout: 5000,//超时时间
        withCredentials:true
    })

    // 2.axios的拦截器
    // 2.1.请求拦截的作用
    instance.interceptors.request.use(config => {
        return config
    }, err => {
        console.log(err) //为了调试
        return Promise.reject(err)
    })

    // 2.2.响应拦截
    instance.interceptors.response.use(res => {
        // console.log(res)
        return res.data
    }, err => {
        console.log(err);//为了调试
        return Promise.reject(err)
    })

    // 3.发送真正的网络请求
    return instance(config)
}

2、login.js封装接口

import {request} from "./request";

export function userLogin(params) {
    return request({
        method:"post",
        url:"/um/userLogin",
        params:params
    })
}

3、接口调用

userLogin({id:1,value:3}).then(response=>{
    console.log(response.data);
})