axios
vue.config.js
module.exports={
devServer: {
proxy: {
"/devapi": {
target: "http://127.0.0.1:3000",
pathRewrite: {
"^/devapi": ""
}
}
},
},
}
./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 => {
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"))