在封装axios时,可以通过添加请求拦截器和响应拦截器来处理不同域名的接口、参数和返回格式不统一的情况。在请求拦截器中,可以对请求做一些处理,如设置请求头、添加token等;在响应拦截器中,可以对响应做一些处理,如统一处理错误信息、返回的数据格式等。

以下是一个示例代码,假设有两个不同域名的接口,其中一个返回的数据格式是{status: 0, data: {}},另一个返回的数据格式是{code: 0, result: {}}:

import axios from 'axios'

const instance1 = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000
})

const instance2 = axios.create({
  baseURL: 'http://api.anotherexample.com',
  timeout: 5000
})

// 添加请求拦截器
instance1.interceptors.request.use(
  config => {
    // 对请求做一些处理,如设置请求头、添加token等
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance1.interceptors.response.use(
  response => {
    const { status, data } = response.data
    // 统一处理返回的数据格式
    if (status === 0) {
      return data
    } else {
      return Promise.reject(response.data)
    }
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加请求拦截器
instance2.interceptors.request.use(
  config => {
    // 对请求做一些处理,如设置请求头、添加token等
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance2.interceptors.response.use(
  response => {
    const { code, result } = response.data
    // 统一处理返回的数据格式
    if (code === 0) {
      return result
    } else {
      return Promise.reject(response.data)
    }
  },
  error => {
    return Promise.reject(error)
  }
)

export { instance1, instance2 }

在组件中使用时,可以根据不同的接口调用对应的实例:

import { instance1, instance2 } from './axios'

instance1.get('/api1/someEndpoint')
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

instance2.post('/api2/someEndpoint', { someData: 'data' })
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

这样就可以通过请求拦截器和响应拦截器来处理不同域名的接口、参数和返回格式不统一的情况。

标签: none

添加新评论