vue中使用axios 封装（学习记录）

这是一篇学习帖，记录以下Vue里使用axios封装的过程，以便下次用

axios拆分封装

为了将请求和页面逻辑分开，实现解耦的目的，对axios进行二次封装，主要将请求函数，配置，拦截器拆分出来，实现解耦。
目录结构如下

1. api （文件夹）存放 请求函数
2. config(文件夹) 存放配置
3. utils （文件夹）存放axios底层+axios封装暴露接口
   下面一层一层展开

首先是utils

1.axios.js 存放拦截器应对错误处理等

// 封装axios的请求，返回重新封装的数据格式
// 对错误的统一处理
import axios from 'axios'
import errorHandle from './errorHandle'

class HttpRequest {
  constructor (baseUrl) {
    this.baseUrl = baseUrl
  }
  // 获取axios配置
  getInsideConfig () {
    const config = {
      baseURL: this.baseUrl,
      headers: {
        'Content-Type': 'application/json;charset=utf-8'
      },
      timeout: 10000
    }
    return config
  }
  // 设定拦截器
  interceptors (instance) {
    // 请求拦截器
    instance.interceptors.request.use((config) => {
      // Do something before request is sent
      return config
    }, (err) => {
      // debugger
      errorHandle(err)
      // Do something with request error
      return Promise.reject(err)
    })

    // 响应请求的拦截器
    instance.interceptors.response.use((res) => {
      // Any status code that lie within the range of 2xx cause this function to trigger
      // Do something with response data
      if (res.status === 200) {
        return Promise.resolve(res.data)
      } else {
        return Promise.reject(res)
      }
    }, (err) => {
      // Any status codes that falls outside the range of 2xx cause this function to trigger
      // Do something with response error
      // debugger
      errorHandle(err)
      return Promise.reject(err)
    })
  }
  // 创建实例
  request (options) {
    const instance = axios.create()
    const newOptions = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance)
    return instance(newOptions)
  }
  get (url, config) {
    const options = Object.assign({
      method: 'get',
      url: url
    }, config)
    return this.request(options)
  }
  post (url, data) {
    return this.request({
      method: 'post',
      url: url,
      data: data
    })
  }
}

export default HttpRequest

2.errHandle.js 这里写错误处理的逻辑

const errorHandle = (err) => {
  console.log(err)
}

export default errorHandle

3. request.js 暴露axios类 ，供调用

import HttpRequest from './axios'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.process

const axios = new HttpRequest(baseUrl)

export default axios

接下来是config文件夹

1.我这边只写了index.js（存放请求基本地址）

export default {
  baseUrl: {
    dev: 'http://localhost:3000',
    pro: 'http://www.toimc.com:12000'
  }
}

最后是上层的封装api文件夹

1.login.js

import axios from '@/utils/request'



/**
 * 找回密码接口
 * @param {} option 用户信息（邮箱，验证码）
 */
const forget = (option) => {
  return axios.post('/forget', {
    ...option
  })
}

/**
 * 登录接口
 * @param {*} loginInfo 用户登录信息
 */
const login = (loginInfo) => {
  return axios.post('/login/login', {
    ...loginInfo
  })
}

/**
 * 注册接口
 * @param {*} regInfo 用户注册信息
 */
const reg = (regInfo) => {
  return axios.post('/login/reg', {
    ...regInfo
  })
}

export {
  getCode,
  forget,
  login,
  reg
}

上面都是属于逻辑层，下面是业务层面，直接与业务相关的，以登录为例

import { login } from '../api/login'
async submit () {
      login({
        username: this.username,
        password: this.password,
        code: this.code,
        sid: this.$store.state.sid
      }).then((res) => {
        if (res.code === 200) {
          this.username = ''
          this.password = ''
          this.code = ''
          console.log(res)
        } else  {
          console.log('some err')
        }
      })
    }