2021/2/27 VUE AXIOS封装

Axios导入

npm install axios --save 

Axios封装配置 ---axios.js

import Axios from 'axios'
// axios封装
class HttpRequest{
    //构造方法，可指定反向代理路劲
    constructor(){

    }

    //拦截器、可配置全局loding与 url过滤拦截操作，以及添加token
    interceptors(instance, url){
        instance.interceptors.request.use(config =>{
            console.log("请求拦截")
            return config
        }),err =>{
            console.log(err)
        }
        instance.interceptors.response.use(res =>{
            console.log("响应拦截")
            return res
        })
    }
    //axios封装的主方法，运用请求，optios参数为请求信息，包括url，method类型，以及携带参数
    request(options) {
        const instance = Axios.create()
        this.interceptors(instance, options.url)
        return instance(options)
    }
}

export default HttpRequest

aixos api 配置 -- @/api/index.js

import HttpRequest from '@/lib/axios'

const axios = new HttpRequest()

export default axios

axios api方法配置 

import axios from './index'

//携带参数
export const getUserInfo = (userName) =>{
    return axios.request({
        url: '/getUserInfo',
        methods: 'get',
        data:{
            userName,
        }
    })
}

//非携带参数
export const getUser = () =>{
    return axios.request({
        url: '/getUser',
        methods: 'post',
    })
}