十分钟封装一个好用的axios步骤示例

下面我将详细讲解“十分钟封装一个好用的axios步骤示例”的完整攻略。

1. 引入axios

首先，我们需要在项目中引入axios，可以通过npm或者CDN的方式引入。比如，在Vue项目中，我们可以在main.js入口文件中引入axios：

import axios from 'axios'
Vue.prototype.$http = axios

这样就可以在项目中的每个组件中通过this.$http来使用axios。

2. 封装axios请求函数

我们可以封装一个通用的axios请求函数，方便我们在项目中调用。

// src/utils/request.js
import axios from 'axios'

axios.defaults.timeout = 10000 // 设置超时时间为10秒

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 在这里可以添加一些请求头等操作，比如token的添加
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
axios.interceptors.response.use(
  response => {
    // 在这里可以对返回的数据进行处理，比如错误码的统一处理
    return response
  },
  error => {
    return Promise.reject(error)
  }
)

/**
 * 封装axios请求函数
 * @param url 请求url
 * @param data 请求参数
 * @param method 请求方法，默认为get
 */
export default function request(url, data = {}, method = 'get') {
  return new Promise((resolve, reject) => {
    axios({
      method: method,
      url: url,
      data: method === 'post' ? data : null,
      params: method === 'get' ? data : null
    }).then(response => {
      // 请求成功
      resolve(response.data)
    }).catch(error => {
      // 请求失败
      reject(error)
    })
  })
}

在这个请求函数中，我们封装了一个通用的请求拦截器和响应拦截器，可以在拦截器中添加一些通用的操作。对于请求参数的封装，则是在Promsie中判断了请求方法的类型，并且对于不同类型的请求，将参数放到不同的地方。

3. 在项目中使用封装好的axios请求函数

接下来，我们可以在项目的组件中使用刚才封装好的请求函数了。比如，在Vue的一个组件中调用：

// src/views/Home.vue
import request from '@/utils/request'

export default {
  name: 'Home',
  methods: {
    getData() {
      request('/api/data').then(data => {
        console.log(data)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

在这里，我们在组件中导入了封装好的请求函数，并且在methods中使用。

4. 添加错误处理

最后，我们可以对错误进行处理，比如在封装好的请求函数中添加：

/**
 * 封装axios请求函数
 * @param url 请求url
 * @param data 请求参数
 * @param method 请求方法，默认为get
 */
export default function request(url, data = {}, method = 'get') {
  return new Promise((resolve, reject) => {
    axios({
      method: method,
      url: url,
      data: method === 'post' ? data : null,
      params: method === 'get' ? data : null
    }).then(response => {
      // 请求成功
      resolve(response.data)
    }).catch(error => {
      // 请求失败
      if (error.response) {
        // 服务器返回错误码
        reject(error.response.data)
      } else {
        // 断网等其他错误
        reject('网络连接出错')
      }
    })
  })
}

在这个例子中，如果服务器返回错误码，我们就将错误码reject回来，否则就给出一个提示信息。

综上，通过以上的步骤，我们就可以十分钟封装一个好用的axios了。