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");
})