Vue项目的网络请求代理到封装步骤详解

下面我将为您讲解“Vue项目的网络请求代理到封装步骤详解”的完整攻略。

一、配置跨域请求代理

在 Vue 项目中，我们要请求后端资源，遇到运行时跨域问题，通常有以下几种解决方案：

1. 使用 JSONP

JSONP 通过 script 标签的 src 属性请求服务器获取数据，由于 script 标签的 src 属性不受同源策略限制，所以可以跨域请求。但是 JSONP 只支持 GET 请求，且需要后端配合返回约定好的 callback 信息，如果后端返回的 JSON 数据格式不合法，将导致前端出现错误。

2. 通过CORS解决跨域

CORS 即跨域资源共享，它需要后端对请求头信息进行处理，返回 Access-Control-Allow-* 相关的信息，来指示服务端允许哪些域名进行访问，这是一个相对比较通用的方式。

3. 使用代理

使用代理是一个相对比较灵活的跨域解决方式，通常情况下前端不需要对代码做任何改动，只需要在项目中配置代理即可。所以代理通常是一个比较有趣的解决方式，同时也是一个通用性较强的做法。

我们可以先在 vue.config.js 文件中开启代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': { // 配置代理
        target: 'http://localhost:3000', // 设置代理服务器的端口号和地址
        changeOrigin: true, // 开启跨域请求
        pathRewrite: {
          '^/api': '' // 去除请求路径中的/api前缀
        }
      }
    }
  }
}

这里配置了一个名为 proxy 的选项，/api 是需要代理的 URL 前缀，http://localhost:3000 为可接受请求的服务器地址，changeOrigin 表示是否开启跨域请求，pathRewrite 表示需要重写请求的路径，将 /api 替换成空字符串。

这种方式的优点是在同一端口下进行跨域请求，方便开发和调试。

二、网络请求封装

通过上面的配置，我们就可以发起跨域请求了，但是我们通常不会在每个页面中单独发起请求，而是将请求封装在一个 API 模块中，便于管理和维护代码。下面是一个示例：

// api.js
import axios from 'axios'

const instance = axios.create({
  baseURL: '/api',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
})

// 使用方法1
export function getUser(params) {
  return instance.get('/user', { params })
}

// 使用方法2
export function addUser(data) {
  return instance.post('/user', data)
}

// ...

上面的代码中，我们使用了 axios 库来发起 HTTP 请求，通过 create 方法创建一个实例对象，设置了基础 URL、超时时间和请求头信息。然后，我们创建了多个方法，用于发送不同类型的请求。

这里我们使用两种不同形式的请求方式。一个是通过 get 方法发送请求，带上一个 params 参数，常用于查询操作。另一个是通过 post 方法来发送请求，附带需要传递的数据。

通过这种方式，我们可以在项目中封装不同类型的请求，并将其集中管理，在进行大规模代码开发时，能够达到事半功倍的效果。

三、示例

这里以请求 GitHub API 为例。假设我们需要获取所有用户的信息。我们的 API 调用如下：

// api.js
import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.github.com/',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
})

export function getAllUsers() {
  return instance.get('/users')
}

这里我们使用 GitHub 公共 API，实例 baseURL 为 https://api.github.com/，然后发送一个 GET 请求，请求的路径是 /users，返回回来所有的用户信息。

下面是引用的方式：

// main.js
import Vue from 'vue'
import App from './App.vue'
import { getAllUsers } from './api'

Vue.config.productionTip = false

Vue.prototype.$getAllUsers = getAllUsers

new Vue({
  render: h => h(App),
}).$mount('#app')

在其它 Vue 文件中，可以直接使用 $getAllUsers() 函数发起请求，将返回的用户信息打印在控制台中：

// HelloWorld.vue
export default {
  name: 'HelloWorld',
  data() {
    return {
      users: []
    }
  },
  mounted() {
    this.$getAllUsers()
      .then(res => {
        this.users = res.data
        console.log(this.users)
      })
      .catch(err => console.error(err))
  }
}

执行 npm run serve 后你会看到用户信息输出到控制台上了。

以上就是“Vue项目的网络请求代理到封装步骤详解”的完整攻略及示例说明。