vue2.x axios封装

安装

npm install axios --save

在src目录下新建 utils，在utils下新建request.js

axios1.png

request.js代码

import axios from 'axios'
import _get from 'lodash.get'
import store from '../store'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 60000, // 请求超时时间
  withCredentials: true,
  headers: { /*解决ie自动缓存*/
    'cache-control': 'no-cache',
    'Pragma': 'no-cache'
  }
});

service.interceptors.response.use((res) => { /*设置拦截*/
  const code = _get(res, 'data.code');
  const msg = _get(res, 'data.msg');
  if (code === 50014) {
    store.commit('turnOnShowLoginBox');
    return;
  }

  if (code !== 1 && code !== 200 &&  msg){
    // Message.error(msg);
    return Promise.reject(msg);
  }
  return res.data;
}, error => {
  return Promise.reject(error);
});

export default service

使用
在src下新建api文件，在api文件里新建login.js(我随便取的)

login.js代码

import request from '@/utils/request'

/*get请求*/
export function method1(id) {
  return request({
    url: 'url' + id,
    method: 'get'
  })
}
export function method2(query) {
  return request({
    url: 'url',
    method: 'get',
    params: query
  })
}
/*post请求*/
export function method3(data) {
  return request({
    url: 'url',
    method: 'post',
    data
  })
}
/*put请求*/
export function method4(data) {
  return request({
    url: 'url',
    method: 'put',
    data
  })
}
/*delete请求*/
export function method5(id) {
  return request({
    url: 'url' + id,
    method: 'delete',
  })
}

页面使用

import { method1,method2... } from '@/api/login.js'
export default {
  name: 'app',
  mounted() {
    // this.getL()
  },
  methods: {
    getL() {
      method1(id).then(res => {
        console.log(res)
        console.log(process.env.VUE_APP_BASE_API)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}