axios封装使用

axios配置

配置拦截 并使用 promise封装 get和post请求

提示：注意部分伪代码，需要根据实际场景做一些修改

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    if (store.getters.token) {
      // 让每个请求携带自定义token
      // ['Authorization']是一个自定义头密钥
      // 请根据实际情况进行修改
      config.headers['Authorization'] = getToken()
    }
    return config
  },
  error => {
    // 请求错误处理
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 数据响应成功
    const res = response.data
    if (res.code !== 20000) {
      // 根据后端实际返回的错误码进行判断
      // 50008: 非法的token; 50012: 其他客户端登录了; 50014: Token 过期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // 如果token失效或者其他客户端登录，跳转到登录页面
        MessageBox.confirm('你已经被登出，请重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
      }
      // 返回错误信息
      return Promise.reject(res.message)
    } else {
      // 返回正确的响应数据
      return response.data
    }
  },
  error => {
    // 数据响应失败
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: 'get',
      params: params
    })
      .then(response => {
        resolve(response)
      })
      .catch(error => {
        reject(error)
      })
  })
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: 'post',
      data: data
    })
      .then(response => {
        resolve(response)
      })
      .catch(error => {
        reject(error)
      })
  })
}

get post封装提升优化：

/**
 * 封装get方法
 * @param {string} url - 请求地址
 * @param {object} [params={}] - 请求参数
 * @param {object} [config={}] - axios配置对象
 * @returns {Promise}
 */

export function get(url, params = {}, config = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: 'get',
      params: params,
      ...config
    })
      .then(response => {
        resolve(response)
      })
      .catch(error => {
        reject(error)
      })
  })
}

/**
 * 封装post请求
 * @param {string} url - 请求地址
 * @param {object} [data={}] - 请求数据
 * @param {object} [config={}] - axios配置对象
 * @returns {Promise}
 */

export function post(url, data = {}, config = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: 'post',
      data: data,
      ...config
    })
      .then(response => {
        resolve(response)
      })
      .catch(error => {
        reject(error)
      })
  })
}

在这里，我们添加了两个可选参数：config和params/data。config参数可以用来设置axios的配置项，比如headers、timeout、withCredentials等。params/data参数可以用来传递请求参数。这样，我们就可以更灵活地使用get和post方法。

---

数据格式规范化：

当然。在前后端协作中，数据格式的统一规范是非常重要的。我们可以在get和post方法中对数据格式进行统一规范。

/**
 * 封装get方法
 * @param {string} url - 请求地址
 * @param {object} [params={}] - 请求参数
 * @param {object} [config={}] - axios配置对象
 * @returns {Promise}
 */

export function get(url, params = {}, config = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: 'get',
      params: params,
      ...config
    })
      .then(response => {
        const result = response.data
        if (result.code === 200) {
          resolve(result.data)
        } else {
          reject(result.message)
        }
      })
      .catch(error => {
        reject(error)
      })
  })
}

/**
 * 封装post请求
 * @param {string} url - 请求地址
 * @param {object} [data={}] - 请求数据
 * @param {object} [config={}] - axios配置对象
 * @returns {Promise}
 */

export function post(url, data = {}, config = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: 'post',
      data: data,
      ...config
    })
      .then(response => {
        const result = response.data
        if (result.code === 200) {
          resolve(result.data)
        } else {
          reject(result.message)
        }
      })
      .catch(error => {
        reject(error)
      })
  })
}

在这里，我们假设服务器返回的数据格式为：

{
  "code": 200,
  "message": "请求成功",
  "data": { "name": "Tom", "age": 18 }
}

我们对get和post方法进行了修改，在成功的回调函数中，我们首先取出返回的数据对象result，然后判断result中的code字段是否为200。如果是200，则说明请求成功，我们将result中的data字段返回；否则，说明请求失败，我们将result中的message字段返回。

这样，我们就可以在前端和后端之间统一数据格式，以方便双方的协作。

使用方法：

import { get, post } from '@/api'

// get请求例子
get('/user/list', { pageNum: 1, pageSize: 10 })
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

// post请求例子
post('/user/add', { name: 'Tom', age: 18 })
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

这里我们首先导入封装好的get和post方法。然后我们可以使用它们来发送get和post请求。在每个请求中，我们可以传递URL和参数对象。在成功的回调函数中，我们将收到从服务器返回的响应数据。在失败的回调函数中，我们将收到一个错误对象，其中包含错误信息。