使用axios优雅的发起网络请求

原文链接：https://www.jianshu.com/p/73585303fdc0

公司项目使用了vue作为技术栈，便理所应当地使用了官方推荐的axios进行网络请求，这里记录下axios的封装方法，以备以后也能优雅的使用。

ajax.js：

/*引入axios*/
import axios from 'axios'

/*创建axios实例对象*/
const ajax = axios.create({
  baseURL: ajaxUrl,
  timeout: 30000
})

/*请求拦截器（请求之前的操作）*/
ajax.interceptors.request.use(
  config => {
    return config
  },
  /*错误操作*/
  err => {
    return Promise.reject(err)
  }
)

/*请求之后的操作*/
ajax.interceptors.response.use(
  config => {
    return config
  },
  err => {
    return Promise.reject(err)
 })

/*导出模块*/
export default ajax

 

api.js：

import ajax from '../libs/ajax'

const captcha = () => {
  return ajax.get(`app/captcha`)
}
const login = (params) => {
  return ajax.post(`auth/login`, params)
}

const apiList = {
  captcha,
  login  
}

export default apiList

 

index.js：
将导出的api请求挂在到vue原型上

import apiList from './api'

const install = function (Vue) {
  if (install.installed) return
  install.installed = true

  /*定义属性到Vue原型中*/
  Object.defineProperties(Vue.prototype, {
    $api: {
      get () {
        return apiList
      }
    }
  })
}

export default {
  install
}

 

main.js：

/*引入index.js*/
import api from '.xxx' 

Vue.use(api)

 

按以上模板进行封装之后，就可以在需要的地方直接发起api请求了，如下：

this.$api.login(params).then(res => {
  /*请求成功后的操作*/
 }).catch(err => {
  /*请求失败后的操作*/              
 })