在项目中封装axios的实战过程

在项目中封装axios能够使代码更加简洁易读，并且可以统一管理请求接口、请求头等信息，提高代码的可维护性和可拓展性。下面是封装axios的完整攻略：

步骤一：安装axios并创建实例

首先需要在项目中安装axios依赖包，通过npm仓库下载、或者使用CDN链接在html文件中引入。

安装命令：npm install axios

接着，我们需要在项目中创建一个axios的实例，在这个实例中可以配置默认请求头信息、请求超时时间等，如下所示：

import axios from 'axios';

const service = axios.create({
  baseURL: 'https://api.example.com/',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

export default service;

以上代码创建了一个axios实例，并且设置了请求的默认baseURL、超时时间和Content-Type请求头。

步骤二：封装接口请求方法

接着，我们需要封装一个统一的请求方法，这个方法可以通过传入请求的url、请求参数和请求方法来发起请求，并且可以拦截请求、响应等不同的状态。示例代码如下：

import service from './request'; // 引入axios实例

service.interceptors.request.use(
  (config) => {
    // 在请求发送之前做些什么
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    return response.data;
  },
  (error) => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export function post(url, params) {
  return service({
    method: 'post',
    url,
    data: params
  });
}

export function get(url, params) {
  return service({
    method: 'get',
    url,
    params
  });
}

以上代码封装了post和get两个方法，可以通过调用这两个方法发送post和get请求，并且在发送请求前和响应返回后可以做拦截器拦截。

示例一：获取数据列表

假设我们需要从服务端获取一个数据列表，可以通过get方法发送请求，并且通过params参数传递一些过滤条件，示例代码如下：

import { get } from '@/utils/api';

export function fetchList(query) {
  return get('/list', query);
}

以上代码封装了一个fetchList方法，通过调用get方法并传递'/list'和query参数来获取数据列表。

示例二：提交表单数据

假设我们需要将表单数据提交到服务端进行处理，可以通过post方法发送请求，并且通过data参数传递表单数据，示例代码如下：

import { post } from '@/utils/api';

export function submitForm(data) {
  return post('/form', data);
}

以上代码封装了一个submitForm方法，通过调用post方法并传递'/form'和data参数来提交表单数据。

通过以上步骤，我们就实现了将axios封装到项目中并发送请求的过程。