项目中Axios二次封装实例Demo

下面我将详细讲解"项目中Axios二次封装实例Demo"的完整攻略。

首先，我们需要明确的是Axios是一个重要的HTTP库，用来发送AJAX请求，其具有易用的API、自动转换的JSON数据、客户端和服务端程序员可使用的promise等特性。

但是，在实际的项目中，我们可能需要对Axios进行二次封装，以便我们更好的处理业务逻辑。因此，我们需要遵循以下的步骤来实现这一目标：

步骤一：创建封装函数

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  timeout: 5000 // 请求超时时间
})

// 错误处理函数
const errorHandle = (status, other) => {
  // 状态码判断
  switch (status) {
    case 400:
      console.log('信息校验失败')
      break
    case 401:
      console.log('认证失败')
      break
    case 403:
      console.log('token校验失败')
      break
    case 404:
      console.log('请求的资源不存在')
      break
    default:
      console.log(other);  
  }}

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 添加请求头信息
    config.headers.Authorization = sessionStorage.getItem('token')
      ? sessionStorage.getItem('token')
      : ''
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 在此处对返回的数据进行处理
    return Promise.resolve(response.data)
  },
  error => {
    // 获取错误码
    const { response } = error
    if (response) {
      errorHandle(response.status, response.data.other)
      return Promise.reject(response.data)
  } else {
      console.log('连接到服务器失败')
  }
})

export default service

步骤二：调用封装函数

import service from './service.js'

service
  .post('/api/user/register', {
    username: 'test',
    password: '111111'
  })
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

以上示例中，我们首先创建了一个名为service的axios实例，然后对它进行了二次封装。接下来，在我们的具体业务代码中，只需要调用service实例并使用其中的方法即可发送AJAX请求。如果出现错误，我们也可以在拦截器中进行捕获、处理和返回。

总的来说，上述实例提供了一个二次封装Axios的通用模板，可以在项目中使用和扩展。您可以根据项目需求进行自由组合、拓展，以便我们更好地处理业务逻辑。