vue-配置axios

客户端

import axios from 'axios';
import qs from "qs";

// 创建对象
const requests = axios.create({
  baseURL:"/api",
  timeout: 3000,
  headers: {
    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8" 
  }
})

// 添加请求拦截器
requests.interceptors.request.use((config) => {
  console.log('请求拦截器=',config)
  config.data = qs.stringify(config.data);
  return config;
});

// 添加响应拦截器
requests.interceptors.response.use((response)=> {
  // 对响应数据做点什么
  console.log("响应拦截器=",response)
  return response.data;
}, (error)=> {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default requests;

import requests from "./request"

// 接口
export const axiosFun = (data={}) =>
  requests({
    url: "/list",
    data,
    method: "post",
  })

methods:{
    // 点击事件
    async hanldAxiosFun() {
      let data = {
        name: 'moke',
        age: 12
      }
      axiosFun(data).then(res=>{
        console.log("响应数据=", res)
      })
      
      let data1 = {
        name: 'jack',
        age: 23
      }
      let res = await axiosFun(data1);
      console.log("响应数据1--",res)
    }
  }

服务器

var express = require('express');
var router = express.Router();

/* post home page. */
router.post('/list', function(req, res, next) {
  console.log("=======",req.body)
  // res.render('index', { title: 'Express' });
  let data = {
    code: 1,
    message: "ok",
    result: {
      list: [
        {
          name:req.body.name,
          age:req.body.age
        }
      ],
      page: 1,
      pageSize: 10,
      total: 1
    }
  }
  res.send(data)
});

相关依赖： npm install axios npm install qs

结果

服务端

点击进入githubu源码地址