axios 类封装

axios

vue.config.js

module.exports={
   devServer: {
        proxy: {
        	//设置代理
            "/devapi": {
                target: "http://127.0.0.1:3000", // 接口的域名
                pathRewrite: {
                    "^/devapi": ""	//通配符
                }
            }
        },
    },
}
//设置完成后重启npm

./src/config/index.js

export const baseURL = process.env.NODE_ENV === 'production' ?
  '' : '/devapi'

./src/lib/axios.js

import axios from 'axios'
import {
	baseURL
} from '@/config'

class HttpRequest {
	constructor(baseUrl = baseURL) {
		this.baseUrl = baseUrl
		this.queue = {}
	}
	getInsideConfig() {
		const config = {
			baseURL: this.baseUrl,
			headers: {
				//
			}
		}
		return config
	}

	interceptors(instance, url) {
		instance.interceptors.request.use(config => {
            // 添加全局的loading...
            // if (!Object.keys(this.queue).length) {
              // Spin.show() 如果存在请求则等待 loading...
            // }
			this.queue[url] = true
			return config
		}, error => {
			return Promise.reject(error)
		})
		instance.interceptors.response.use(res => {
			const {data} = res
			return data
		}, error => {
			return Promise.reject(error)
		})
	}

	request(options) {
		const instance = axios.create()
		options = Object.assign(this.getInsideConfig(), options)
		this.interceptors(instance, options.url)
		return instance(options)
	}
}

export default HttpRequest

./src/api/index.js

import HttpRequest from '@/lib/axios'

const axios = new HttpRequest()

export default axios

./src/api/user.js

import axios from './index'

export function getUserInfo(data){
    return axios.request({
        url:'/getUserInfo',
        method:'post',
        data
    })
}

export function getUserList(data){
    return axios.request({
        url:'/getUserInfo',
        method:'get',
        params: data
    })
}

vue

import {getUserInfo} from '@/api/user.js'

export default{
    methods:{
        async getInfo(){
            const res = await getUserInfo({ id:1 })
            console.log(res)
        }
    }
}

node

const express = require('express')

const app = express()

app.post('/getUserInfo',(req,res,next)=>{
	res.send({ name:'zhansan'})
})


app.listen(3000, () => console.log("http://127.0.0.1:3000"))
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值