Postman导出的API文档代码怎么用在前端项目里？

这个问题我遇到好多次了，带新人的时候几乎每个人都会踩这个坑。Postman生成的代码本身没问题，但它是"裸奔"的代码，直接复制肯定出问题。我来一步步给你讲清楚怎么处理。

先说报错的原因。你遇到的 ReferenceError 很可能有两个原因。第一个原因是 await 只能在 async 函数里面用，你直接把代码粘到 methods 里，外层函数没有声明 async，JavaScript 引擎就不认识这个 await。第二个原因，如果你是在 Node.js 环境或者特别老的浏览器里跑，fetch 这个 API 可能根本不存在。

我先给你一个最简单能跑通的 Vue 组件写法：

export default {

  name: 'UserList',

  data() {

    return {

      userList: [],

      loading: false,

      error: null

    }

  },

  methods: {

    // 这里注意，必须加 async 关键字

    async fetchUsers() {

      this.loading = true

      this.error = null

      

      try {

        // Postman 生成的代码放这里，稍微改改

        const response = await fetch("https://api.example.com/users", {

          method: "GET",

          headers: {

            "Authorization": "Bearer abc123",

            "Content-Type": "application/json"

          }

        })

        

        // 这里需要判断一下请求是否成功

        if (!response.ok) {

          throw new Error(HTTP error! status: ${response.status})

        }

        

        const data = await response.json()

        this.userList = data

        console.log(data)

      } catch (err) {

        this.error = err.message

        console.error('请求出错:', err)

      } finally {

        this.loading = false

      }

    }

  },

  

  // 如果你想页面加载就自动请求，放 mounted 里

  mounted() {

    this.fetchUsers()

  }

}

上面这个写法就能直接用了。核心改动就是给方法加上 async 关键字，然后用 try-catch 包一下处理错误。

不过说实话，真实项目里我们很少直接用原生 fetch。fetch 的坑太多了，比如它不会把 404、500 当成错误抛出来，你得自己判断 response.ok。而且它不支持请求超时，不支持拦截器，错误处理也比较麻烦。

实际开发中一般用 axios，我给你推荐一个更工程化的写法。先装一下 axios：

npm install axios

然后你可以这样组织代码：

// 先在 src/utils/request.js 里封装一下

import axios from 'axios'



// 创建一个 axios 实例

const request = axios.create({

  baseURL: 'https://api.example.com',

  timeout: 10000, // 10秒超时

  headers: {

    'Content-Type': 'application/json'

  }

})



// 请求拦截器，自动带上 token

request.interceptors.request.use(

  config => {

    // 从 localStorage 或 vuex 里拿 token

    const token = localStorage.getItem('token')

    if (token) {

      config.headers.Authorization = Bearer ${token}

    }

    return config

  },

  error => {

    return Promise.reject(error)

  }

)



// 响应拦截器，统一处理错误

request.interceptors.response.use(

  response => {

    return response.data

  },

  error => {

    // 统一处理 401、403、500 等错误

    if (error.response) {

      switch (error.response.status) {

        case 401:

          console.error('登录过期，请重新登录')

          // 这里可以跳转登录页

          break

        case 403:

          console.error('没有权限')

          break

        case 500:

          console.error('服务器错误')

          break

      }

    }

    return Promise.reject(error)

  }

)



export default request

然后在 Vue 组件里用起来就简单多了：

import request from '@/utils/request'



export default {

  name: 'UserList',

  data() {

    return {

      userList: []

    }

  },

  methods: {

    async fetchUsers() {

      try {

        // 简洁多了吧

        const data = await request.get('/users')

        this.userList = data

      } catch (err) {

        console.error('获取用户列表失败', err)

      }

    }

  },

  mounted() {

    this.fetchUsers()

  }

}

这样写的好处是，你的 token 管理、错误处理、baseURL 配置都集中在一个地方，以后换接口地址或者改认证方式，改一个文件就行。Postman 生成的代码主要是帮你验证接口通不通，真正写到项目里还是要自己封装一下。

这里需要注意一点，如果你的项目是 Vue3 的 Composition API 写法，那就要用 setup 语法了，原理一样，只是写法稍有不同。

总结一下你要做的事：把 Postman 生成的代码包在 async 函数里，加上 try-catch 错误处理，有条件的话用 axios 替代原生 fetch，会让你的代码更健壮、更好维护。