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

公司项目使用了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 => {
  /*请求失败后的操作*/              
 })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 夜来辗转难眠,惘思秋人,心絮莽莽, 无处可寄,深遣此篇。 春来由恨,一点红杏闻。 燕子缱绻依雨声,浮起往日旧梦。 ...
    兔子的蹩脚阅读 329评论 0 0
  • 虽然我们每天都在说话,听领导说话,跟同事闲聊,和家人沟通,说话交流是我们生活的主要形式,但是这并不表示我们就能完全...
    阿宇向前看阅读 1,123评论 0 1
  • 在连云港 月薪4000RMB 一年买到东面一套100平房子的首付可能吗 ??????? 大宝宝最近发现 连云港的房...
    副业小达人阅读 521评论 0 0
  • 有时候,爱像一株柠檬草,在广阔的原野上里默默绽放!我爱你,不需要你知道,不需要你回应,我只将这爱悄悄埋藏在心口深处...
    也许还有我阅读 221评论 0 0