前端fetch使用

Fetch

进行开发之前请解决好跨域问题。

vite框架解决跨域 （vite.config.ts / vite.config.js）

export default defineConfig({
  ...other, // 其他配置项
  server: {
    proxy: {
      '/train': {
        target: 'http://88.88.88.88:88',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/train/, '/train') // 请求路径加上'/train'
      },
      '/xxx': {
      	target: 'http://99.99.99.99:99',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/xxx/, '') // 请求路径不加 '/xxx'
      }
    }
  }
})

优化前的fetch请求数据

const requestData = () => {
    fetch('xxxxxx(请求路径)', {
        headers: {
            token: 'xxx'
        },
        method: 'GET',
    }).then(
        response => {
            return response.json() // json() 只能执行一次，多次执行会报错。
        },
        error => {
            console.log(error)
        }
    ).then(
        response => {
            console.log(response)
        },
        error => {
            console.log(error)
        }
    )
}
// 执行 requestData 即可

优化后的fetch请求数据

const requestData = async () => {
    try {
    	// 请求路径考虑跨域问题，后端配置cors可以不考虑
        const response = await fetch('xxxxxx(请求路径)', {
            headers: {
                token: 'xxx'
            }
        });
        const data = await response.json();
        console.log(data)
    } catch (e) {
        console.log(e)
    }
}
// 执行 requestData 即可