axios (偏向Vue) 和fetch (偏向React) 的封装 包括nodejs后端代码

axios

定义一个 axios.js 文件 配置请求拦截器和响应拦截器以及默认服务器基础地址。

axios.js 文件

import axios from 'axios'
//配置基础服务器地址
axios.defaults.baseURL = 'http://127.0.0.1:3000/'
axios.interceptors.request.use(config => {
    return config;
}, error => {
    return Promise.reject(error);
});

axios.interceptors.response.use(response => {
    return response;
}, error => {
    return Promise.reject(error);
});

定义一个或多个单独文件 封装请求方法 命名为 index.js 或其他名字

安装qs: npm i qs

import axios from './axios'  //导入刚才写的axios.js文件 路径根据实际情况来写
import qs from 'qs'
//get  获取用户信息
export const getNews = page => axios.get(`data/news?page=${page}`)
//post  提交用户信息
export const postInfo = data => axios.post("data/info", qs.stringify(data))

在Vue组件中 使用

<template>
  <div class="app"></div>
</template>
<script>
import { postInfo, getNews } from "@/axios/index"; //路径根据实际情况来写
export default {
  mounted() {
    getNews(3)
      .then((res) => {
        console.log(res.data); //{"page":"3"}
      })
      .catch((err) => {
        console.log(err);
      });
    postInfo({ uid: 3, pid: 4 })
      .then((res) => {
        console.log(res); //{ uid: '3', pid: '4' }
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

fetch

定义一个 fetch.js 文件 定义服务器的基础地址

export default {
  //自定义 服务器的基础地址
  url: 'http://127.0.0.1:3001/'
}

定义一个或多个 service.js 文件 封装不同类型的请求

import basefetch from "./fetch"  //引入刚才写的 fetch.js文件  注意fetch不要重名
//每一个方法都单独导出  页面中 用解构 导入
//post  提交表单数据。。。
export const postInfo = (uid, pid) => {
  let url = basefetch.url + 'data/info'
  let options = {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: `uid=${uid}&pid=${pid}`
  }
  return fetch(url, options).then(res => res.json())
}

//get   获取新闻信息。。。
export const getNews = page => {
  page = page ? page : 1
  let url = basefetch.url + 'data/news?page=' + page
  return fetch(url).then(res => res.json())
}

React 项目的.js组件 中 使用封装的fetch

import React from 'react'
import { postInfo, getNews } from '../services';  //路径根据实际情况来写
export default function Index() {
  getNews(3).then((res) => {
    console.log(res);//{"page":"3"}
  }).catch((err) => {
    console.log(err);
  });
  postInfo(3, 4).then((res) => {
    console.log(res);//{ uid: '3', pid: '4' }
  }).catch((err) => {
    console.log(err);
  });
  return (
    <>
      {/* header */}
      {/* banner */}
      {/* main */}
      {/* footer */}
    </>
  )
}

服务器代码 nodejs

npm i express cors

const express = require("express")
const app = express()
const cors = require("cors")
app.use(express.urlencoded({ extended: false }));
app.use(cors())
app.get("/data/news", (req, res) => {
  res.send(req.query);
});

app.post("/data/info", (req, res) => {
  res.send(req.body);
});

app.listen(3001, () => {
  console.log("服务器开启，端口号：3001");
})