Vue中的axios通用配置

首先配置通用设置

import QS from 'qs'
import Axios from 'axios'
import {SERVER} from '@/Config/config'

// 默认请求地址
Axios.defaults.baseURL = SERVER
// 超时时间
Axios.defaults.timeout = 5000

接着 配置拦截器

let load = null
// 发送
Axios.interceptors.request.use(config => {
  // 配置token
  if (store.getters.token) {
    config.headers['x-requested-key'] = `ZXWL${getToken()}`
  }
// 配置content-Type
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  // elementUI的loading
  load = Loading.service({ fullscreen: true })
  return config
}, error => {
  return Promise.reject(error)
})

// 接收
Axios.interceptors.response.use(config => {
  // 关闭loading
  load.close()
  return config
}, error => {
  return Promise.reject(error)
})

最后去配置get方法和post方法

// get方法
export const getService = (url = '', params = {}) => {
  return new Promise((resolve,reject) => {
    Axios.get(url,{param}).then(res => {
      const {data} = res;
      resolve(res);
    }).catch(err => {
      reject(err)
    })
  })
}

// post方法  这里就需要使用qs库来序列化表单
export const postService = (url = '', param = {}) => {
  return new Promise((resolve,reject) => {
    Axios.post(url,QS.stringify(param)).then(res => {
      const {data} = res;
      resolve(data);
    }).catch(err => {
      reject(err)
    })
  })
}

最后 挂载到Vue对象上
再main.js中:

import {getService, postService} from '@/utils/url.js'

// 挂载请求方法
Vue.prototype.$http = {
  POST: postService,
  GET: getService
}

大功告成

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,067评论 19 139
  • 公司有个AR项目,对ios与u3d进行集成,需求如下,点击按钮进入Unity3D界面,并且能够返回,在网上找了一些...
    Gfengwei阅读 13,872评论 46 43
  • 之前偶尔会自己画些简笔画。今天终于迈出了彩铅画的第一步。虽然多有不足。但毕竟第一次。求照拂。鼓励。水溶彩铅不好操作...
    兔纸你要飞吗阅读 300评论 0 0
  • 口语考试、笔试考完,像打游戏一样,把大boss都了结了。生活,似乎没什么改变。说心里很轻松吗?也没有。不过,大家又...
    thanksgi阅读 221评论 1 1
  • 今天的下棋课上,我们甘老师带我们下去下了一盘棋。我和你一位同学选了围棋,我准备和他进行围棋对决。 围棋比赛开始啦!...
    剑魂之主阅读 150评论 0 2