vue封装axios请求并且如何在页面中使用请举例说明

好的，关于封装 axios 请求，我可以给您提供一种常见的做法。我们可以先定义一个 axios 实例，然后统一配置一些请求拦截、响应拦截等操作，并导出一个封装好的函数，供我们在页面中调用。

具体示例如下：

import axios from 'axios'
import Vue from 'vue'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json'
  }
})

// 请求拦截器
service.interceptors.request.use(config => {
  // 在请求发送之前可以对请求做一些处理
  return config
}, error => {
  // 对请求错误做些什么
  Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error)
})

// 封装的请求函数
export function request(url, method, params) {
  return new Promise((resolve, reject) => {
    service({
      url,
      method,
      data: method === 'post' ? params : null,
      params: method === 'get' ? params : null
    }).then(res => {
      resolve(res)
    }).catch(error => {
      reject(error)
    })
  })
}

上面的代码中，我们定义了一个 `service` 实例用于网络请求，然后在 `axios.interceptors` 中定义了一些拦截器，其中 `request` 拦截器用于在请求发送前对请求进行一些处理，`response` 拦截器用于对响应数据进行一些处理。

最后，我们定义了一个封装好的请求函数 `request`，接收三个参数，分别为请求的 URL、请求的方法、请求的参数。在页面中使用时，只需调用 `request(url, method, params)` 即可发送网络请求。

示例：

import { request } from '@/utils/request'

request('/api/user', 'get', { userId: 1 }).then(res => {
  console.log('请求成功：', res.data)
}).catch(error => {
  console.log('请求失败：', error)
})

以上就是一个简单的封装 axios 请求的过程，希望能对您有所帮助。