在 vue-cil 里封装一个简单的 axios

尝试在 vue 中集成 axios ，便动手学习一下，主要还是因为满足业务需求。

安装 axios

$ npm install axios

新建 axios.js

引入 axios

import axios from 'axios'

创建 axios 实例

const service = axios.create({
  // headers: {
  //   TODO
  // },
  // baseURL: process.env.BASE_API, // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  timeout: 10000
})

响应拦截

service.interceptors.response.use(
  response => {
    // dataAxios 是 axios 返回数据中的 data
    const dataAxios = response.data
    // 状态码
    const { ERRORCODE } = dataAxios
    // 根据 ERRORCODE 进行判断
    if (ERRORCODE === undefined) {
      // 如果没有 ERRORCODE 代表这不是项目后端开发的接口
      return dataAxios
    } else {
      // 有 ERRORCODE 代表这是一个后端接口 可以进行进一步的判断
      switch (ERRORCODE) {
        case 0:
          // [ 示例 ] ERRORCODE === 0 代表没有错误
          return dataAxios.RESULT
        case '0':
          // [ 示例 ] ERRORCODE === '0' 代表没有错误
          return dataAxios.RESULT
        case 302:
          // 如果后台返回302，需要跳转到首页，让用户登录
          window.location.href = dataAxios.URL
          // 需要重新登录
          break
        default:
          // 不是正确的 ERRORCODE
          if (process.env.NODE_ENV === 'development') {
            console.log('>>>>>> Error >>>>>>')
            console.log(dataAxios)
          }
          return Promise.reject(dataAxios)
      }
    }
  },
  error => {
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          error.message = '请求错误'
          break
        case 401:
          error.message = '未授权，请登录'
          break
        case 403:
          error.message = '拒绝访问'
          break
        case 404:
          error.message = `请求地址不存在: ${error.response.config.url}`
          break
        case 408:
          error.message = '请求超时'
          break
        case 500:
          error.message = '服务器内部错误'
          break
        case 501:
          error.message = '服务未实现'
          break
        case 502:
          error.message = '网关错误'
          break
        case 503:
          error.message = '服务不可用'
          break
        case 504:
          error.message = '网关超时'
          break
        case 505:
          error.message = 'HTTP版本不受支持'
          break
        default:
          break
      }
    }
    console.log(error.message)
    return Promise.reject(error)
  }
)

具体业务逻辑可以自己调整

导出 axios

export default (url = '', data = {}, type = 'get') => {
  if (type.toLowerCase() === 'get') {
    return new Promise((resolve, reject) => {
      service
        .get(url, { params: data })
        .then(resp => {
          resolve(resp)
          // console.log(resp)
          // if (resp.data.ERRORCODE === 302) {
          //   window.location.href = resp.data.URL
          // } else {
          // resolve(resp.data)
          // }
        })
        .catch(e => {
          reject(e)
        })
    })
  }
  if (type.toLowerCase() === 'post' || type.toLowerCase() === 'put') {
    return new Promise((resolve, reject) => {
      service
        .post(url, data)
        .then(resp => {
          resolve(resp)
          // if (resp.data.ERRORCODE === 302) {
          //   window.location.href = resp.data.URL
          // } else {
          //   resolve(resp.data)
          // }
        })
        .catch(e => {
          reject(e)
        })
    })
  }
}

封装 Api

import Axios from '@/utils/axios.js'

let Api = {}

// 获取其他用户基本信息
Api.getUserInfo = (data = {}) => Axios('/api/account/getUserInfo', data, 'post')

引用 axios

import ApiAccount from '@api/account'

ApiAccount.getUserInfo({ accountID: accountID }).then(res => {
  if (res.accountID) {
    state.storage.setItem(accountID, JSON.stringify(res))
    resolve(res)
  } else {
    reject(res.RESULT)
  }
})

教程到此结束。
代码贵在分享，本人较菜，勿喷。

本作品采用《CC 协议》，转载必须注明作者和本文链接