vue项目使用axios封装request请求的过程

以下是基于Vue项目使用Axios封装Request请求的完整攻略。

1. 准备工作

在使用Axios进行Request请求之前，需要先安装Axios插件，命令如下：

npm install axios --save

安装完毕后，在Vue的入口文件中（一般是main.js）中引入Axios并配置相关信息：

import axios from 'axios'

Vue.prototype.$http = axios.create({
  timeout: 5000,
  baseURL: 'http://localhost:3000'
})

其中，timeout表示请求超时时间，baseURL表示请求的基础URL地址。

2. 封装Axios请求

在Vue项目中，我们可以将所有的Http请求封装到单独的文件中，方便管理和维护。
在src目录下新建一个http文件夹，在此文件夹下再创建一个request.js文件，用于封装Request请求。

import axios from 'axios'

export function get (url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}

export function post (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}

以上代码中，我们封装了get和post两种请求方式，分别返回一个Promise对象，用于异步处理数据。
接下来我们就可以通过import语句直接在Vue项目中使用封装好的request了。

3. 使用封装好的Request

在Vue组件中，我们可以通过this.$http对象访问封装好的Request方法。
以下是使用封装好的Request进行get请求的示例代码：

import { get } from '@/http/request.js'

get('/api/getData', {
  page: 1,
  pageSize: 10
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

在以上代码中，我们通过import语法将封装好的get方法引入到组件中，并调用该方法进行get请求。
其中第一个参数是请求的URL地址，第二个参数是请求参数，请求成功后返回的数据会在Promise对象的then方法中处理，请求失败则会在catch方法中处理。

以下是使用封装好的Request进行post请求的示例代码：

import { post } from '@/http/request.js'

post('/api/addData', {
  name: '张三',
  age: 18
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

在以上代码中，我们通过import语法将封装好的post方法引入到组件中，并调用该方法进行post请求。
其中第一个参数是请求的URL地址，第二个参数是请求参数，请求成功后返回的数据会在Promise对象的then方法中处理，请求失败则会在catch方法中处理。

以上就是基于Vue项目使用Axios封装Request请求的完整攻略。