vue axios的封装

安装

npm install axios -S
npm install --save axios vue-axios qs

环境配置(楼主没有配置需要全局的可以引入)

import axios from '../node_modules/axios'
Vue.prototype.$axios = axios;

axios 文件夹下新建index.js
内容如下:

import axios from 'axios'
import { Message } from 'element-ui'
const qs = require('qs')
if (process.env.NODE_ENV == 'production') { //正式环境
  axios.defaults.baseURL = 'http://192.168.1.254:8001/'
  /* axios.defaults.baseURL = window.location.protocol + "//" +  window.location.host; */
} else { //生产环境
  axios.defaults.baseURL = 'http://192.168.1.48:5000/api/p/'
}
/* axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; */ // 是否为from表单提交的传输对象 默认application/json
axios.defaults.headers.common['Accept'] = 'application/json, */*'
axios.interceptors.request.use(config => {
  let token = window.sessionStorage.getItem('token') // token的获取
  if (config.method === 'post' && config.headers['Content-Type'] != 'multipart/form-data') {
    /* config.data = qs.stringify(config.data); */ // 表单提交json转字符串
  }
  if (token) { // 统一header传送tonken
    config.headers.common['Access-Token'] = token
  }
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(response => { // 报错统一处理
  if (response.data.code === 500) {
    Message({
      message: response.data.message,
      type: 'warning'
    })
  }
  return response
}, error => {
  if (error.response.status == 401) { // 401 的处理
    sessionStorage.removeItem('token')
    return new Promise(() => {}) // pending的promise,中止promise链
  }
  return Promise.reject(error)
})
export default axios

按需引入

import axios from '../../axios/index'

GET用法/POST用法

list () {
     let area = window.sessionStorage.getItem('area')
     axios.get('organization/list?area=' + area).then(res => {
       if (res.data.code === 200) {
         this.medicalList = res.data.data.list
       }
     })
   },
   //post
   axios.post('auth/login', params).then(res => {
           if (res.data.code == 200) {
             this.logining = false
             sessionStorage.setItem('token', res.data.data.access)
             let token = window.sessionStorage.getItem('token')
             if (token) {
               this.$router.push({path: '/home'})
             }
           } else {
             this.$message({
               type: 'error',
               message: res,
               center: true
             })
           }
         })
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容