【vue】如何使用axios进行前端数据请求和封装

axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js中发送数据请求。axios具有以下特点：

• 支持浏览器和Node.js
• 支持Promise API
• 支持拦截请求和响应
• 支持转换请求和响应数据
• 支持取消请求
• 支持自动转换JSON数据
• 支持客户端防御XSRF

axios的基本用法

要使用axios，首先需要安装它：

npm install axios

然后在代码中引入它：

import axios from 'axios'

或者使用script标签引入它：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

接下来，就可以使用axios发送各种类型的请求，例如：

// 发送GET请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功的响应
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误的响应
    console.log(error);
  });

// 发送POST请求
axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 发送多个并发请求
axios.all([
  axios.get('/user/12345'),
  axios.get('/user/67890')
])
  .then(axios.spread(function (user1, user2) {
    // 处理两个响应
    console.log(user1.data);
    console.log(user2.data);
  }));

axios的配置选项

axios可以通过传递一个配置对象来自定义请求，例如：

// 使用给定的配置发送请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 1000,
  responseType: 'json'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

配置对象的属性有：

• url：请求的地址，必须指定
• method：请求的方法，可选，默认为get
• baseURL：请求的基础地址，如果url不是绝对地址，会拼接在其前面
• params：请求的查询参数，会自动转换为URL字符串并添加到url后面
• data：请求的主体数据，只适用于put、post、patch等方法，会自动转换为JSON字符串（除非指定了其他transformRequest）
• headers：请求的头部信息，可以设置通用的或者特定方法的头部
• timeout：请求的超时时间，单位毫秒
• withCredentials：是否携带cookie信息，可选，默认为false
• responseType：响应的数据类型，可选，默认为json
• transformRequest：请求数据转换函数或函数数组，在发送请求之前对数据进行修改，返回修改后的数据或Promise对象
• transformResponse：响应数据转换函数或函数数组，在接收响应之后对数据进行修改，返回修改后的数据或Promise对象
• cancelToken：取消请求的令牌，可以使用CancelToken.source.factory方法创建一个取消令牌源，并通过其token属性获取令牌，然后通过其cancel方法取消请求

axios的拦截器

axios可以通过拦截器来在请求或响应被发送或处理之前进行一些操作，例如：

// 添加一个请求拦截器，在发送请求之前做一些事情
axios.interceptors.request.use(function (config) {
  // 比如在config中添加一个token字段
  config.token = 'some token';
  return config;
}, function (error) {
  // 处理请求错误
  return Promise.reject(error);
});

// 添加一个响应拦截器，在接收响应之后做一些事情
axios.interceptors.response.use(function (response) {
  // 比如在response中添加一个status字段
  response.status = 'success';
  return response;
}, function (error) {
  // 处理响应错误
  return Promise.reject(error);
});

axios的封装

为了方便使用和管理axios，我们可以对其进行一些封装，例如：

// 创建一个axios实例，并设置一些默认配置
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
});

// 封装一个通用的request函数，接收一个options对象作为参数，并返回一个Promise对象
function request(options) {
  return new Promise((resolve, reject) => {
    // 使用instance发送请求，并处理成功或失败的结果
    instance(options)
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

// 封装一些具体的API函数，根据不同的业务需求调用request函数，并传递相应的配置参数

// 获取用户列表
function getUserList() {
  return request({
    url: '/users',
    method: 'get',
  });
}

// 添加用户
function addUser(data) {
  return request({
    url: '/users',
    method: 'post',
    data,
  });
}

// 删除用户
function deleteUser(id) {
  return request({
    url: `/users/${id}`,
    method: 'delete',
  });
}

// 导出API函数供其他模块使用
export { getUserList, addUser, deleteUser };

以上就是我关于axios的使用方法和封装的文章，希望对你有帮助。