封装 axios+promise通用请求函数操作

封装 axios+promise 通用请求函数可以提高代码的复用性和可维护性，下面详细讲解一个完整的攻略。

1. 安装 axios

使用 npm 安装 axios：

npm i axios

2. 创建请求函数

import axios from 'axios'

/**
 * 封装 axios+promise 通用请求函数
 * @param {string} url - 请求地址
 * @param {object} [params] - 请求参数
 * @param {string} [method='get'] - 请求方法
 * @returns {Promise} - 返回一个 Promise 对象
 */
export function request(url, params = {}, method = 'get') {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method,
      params,
    })
      .then((response) => {
        resolve(response.data)
      })
      .catch((error) => {
        reject(error)
      })
  })
}

该函数接受三个参数，分别是请求地址、请求参数和请求方法。返回一个 Promise 对象，成功时返回数据，失败时返回一个错误对象。

3. 使用请求函数

使用封装好的请求函数，发送请求，例如：

// 发送 get 请求
request('/api/list', { page: 1 }).then((data) => {
  console.log(data)
})

// 发送 post 请求
request('/api/add', { name: '张三', age: 22 }, 'post').then((data) => {
  console.log(data)
})

4. 封装请求拦截器和响应拦截器

import axios from 'axios'

const instance = axios.create({
  baseURL: '/api',
  timeout: 5000,
})

/**
 * 请求拦截器
 */
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    return config
  },
  (error) => {
    // 对请求错误做些什么
    console.log(error)
    return Promise.reject(error)
  }
)

/**
 * 响应拦截器
 */
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    return response.data
  },
  (error) => {
    // 对响应错误做点什么
    console.log(error)
    return Promise.reject(error)
  }
)

/**
 * 封装 axios+promise 通用请求函数
 * @param {string} url - 请求地址
 * @param {object} [params] - 请求参数
 * @param {string} [method='get'] - 请求方法
 * @returns {Promise} - 返回一个 Promise 对象
 */
export function request(url, params = {}, method = 'get') {
  return new Promise((resolve, reject) => {
    instance({
      url,
      method,
      params,
    })
      .then((response) => {
        resolve(response)
      })
      .catch((error) => {
        reject(error)
      })
  })
}

这段代码中，我们创建了一个 axios 实例，并设置了一些默认选项（baseURL 和 timeout），然后通过拦截器来处理请求和响应，最后使用封装好的请求函数发送请求。

5. 示例说明

示例一：获取用户列表

// 发送 get 请求
request('/api/user/list', { page: 1 }).then((data) => {
  console.log(data)
})

假设我们的后端 API 接口提供了一个获取用户列表的接口 /api/user/list，需求是从第一页开始获取用户列表，每页显示 10 条。我们可以使用如上代码来发送一个 GET 请求。

示例二：用户注册

// 发送 post 请求
request('/api/user/register', { username: '张三', password: '123456' }, 'post').then((data) => {
  console.log(data)
})

假设我们的后端 API 接口提供了一个用户注册的接口 /api/user/register，需求是给我们提供一个用户名和密码，然后注册账号。我们可以使用如上代码来发送一个 POST 请求。