vue中数据请求axios的封装和使用

下面我来详细讲解一下，如何在Vue中封装和使用Axios进行数据请求的攻略。

一、为什么要封装Axios

在Vue项目中，我们使用Axios进行数据请求是非常常见的。但是，在实际开发中，我们会发现，每次使用Axios时，都需要进行一些基本的配置，如设置请求头、设置接口地址、设置请求方式等。这些配置信息重复写很麻烦，而且也不利于项目的维护。因此，我们需要将这些配置信息进行封装，以便于我们日后的使用和维护。

二、封装Axios

1. 安装和引入Axios

在开始封装Axios之前，我们需要先安装和引入Axios库。

可以使用npm安装Axios：

npm install axios -S

然后在项目中引入Axios：

import axios from 'axios'

2. 创建Axios实例

在封装Axios时，我们需要创建一个全局的Axios实例，以便我们对其进行统一的配置和管理。

let instance = axios.create({
  timeout: 5000, // 超时时间
  baseURL: process.env.VUE_APP_BASE_API, // 后台接口的域名地址
  headers: {
    // 设置请求头等信息
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

在创建实例时，我们需要进行一些基本的配置，如设置超时时间、设置后台接口的域名地址、设置请求头等信息。这样，我们在日后使用Axios时，就可以使用该实例进行数据请求。

3. 对Axios实例进行封装

在上一步，我们创建了一个全局的Axios实例，我们可以对该实例进行进一步的封装，并将其封装为一个方法，以便我们在日后的代码中进行调用。

function request (options) {
  return new Promise((resolve, reject) => {
    instance(options).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  })
}

在该方法中，我们使用Promise来进行返回结果的处理，以便我们在使用时，可以通过.then()来获取请求结果，或通过.catch()来捕获请求异常。

同时，在封装该方法时，我们也可以对请求结果进行一定的处理，如将返回的结果进行统一的格式化等。

三、使用Axios进行数据请求

在封装好Axios后，我们就可以在项目中使用Axios进行数据请求了。

const options = {
  url: '/api/login', // 接口地址
  method: 'post', // 请求方式
  data: { // 请求参数
    username: 'admin',
    password: '123456'
  }
}

request(options).then(res => {
  console.log(res.data)
}).catch(err => {
  console.log(err)
})

在实际使用时，我们只需要根据需求，设置接口地址、请求方式、请求参数等信息，然后调用封装好的request方法即可。

四、Axios的使用示例

示例一：获取用户列表

export function getUserList (params) {
  const options = {
    url: '/api/userList',
    method: 'get',
    params: params
  }
  return request(options)
}

在该示例中，我们通过调用封装好的request方法，来发送一个get请求，获取用户列表。

示例二：添加用户

export function addUser (data) {
  const options = {
    url: '/api/addUser',
    method: 'post',
    data: data
  }
  return request(options)
}

在该示例中，我们通过调用封装好的request方法，来发送一个post请求，添加用户。

五、总结

至此，Vue中数据请求Axios的封装和使用就介绍完毕了。通过对Axios的封装，我们可以减少项目中冗余的代码，优化代码的结构，提高代码的可维护性。而通过实际的使用示例，我们也可以更好的理解Axios在Vue项目中的应用。