4 网络请求

约 145 个字 61 行代码 预计阅读时间 1 分钟

1 Ajax

React 应用需要引入第三方 Ajax 库 / 自己封装 此处使用 axios 进行实现

引入并使用

import axios from 'axois'

axois.get('URL').then({
    res => {console.log(res.data)},
    err => {console.log(err.message)}
})

配置代理

• 匹配规则
  • 本地服务器以 /public 为根路径
    • 本路径下存在 - 返回本地资源
    • 本路径下不存在 - 向 proxy 配置的远端请求

单个代理

// @ package.json
{
    ...,
    // 不知道为啥用localhost会寄，用 127.0.0.1 就正常了
    "proxy": "URL of Server" 
    // 之后的请求给本地代理发就行了
}

多个代理

首先需要进行安装 npm i http-proxy-middleware --save

// @ src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        createProxyMiddleware('/api', { // 以 api 为前缀的请求会触发该代理
            target: 'http://127.0.0.1:3030',
            secure: false,
            changeOrigin: true, // 修改 host 与目标服务器同源
            pathRewrite: {
                "^/api": ""
            }
        }
    ))
}

2 Fetch

文档地址，另一个国内的文档

Fetch 是 window 的原生函数，不基于 xhr 发送 Ajax 请求 => 但是老版本的浏览器可能不支持捏

// GET 请求
fetch('URL').then(
    res => {
        // 第一步：「联系服务器」是否成功（返回404也是成功）
        // => 数据在 res.josn() 里（是一个 Promise 对象）
        return res.json()
    },
    /*err => {
        // 断网才会到这里
        return new Promise(()=>{}) // 不然返回 undefined 还会到下面的 res
    }*/
).then(
    res => {
        // res 本身就是 data 对象
    },
    /*err => {
        // err 本身就是 errMsg
    }*/
).catch(
    err => {
        console.log(err) // 兜底的错误处理函数
    }
)
// 优化的版本
search = async()=>{
    try {
        const res = await fetch('URL')
        const data = await res.json()
        console.log(data) // 返回的数据在 data 里（是个Obj）
    } catch(err) {
        console.log(err)
    }
}