axios封装

创建文件

在src目录下新建until文件，并新建fetch.js文件

import axios from 'axios'
import {
  Message
} from 'element-ui'
import router from '../router';
import store from '../store'
// create axios
const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 5000
})

// request block
service.interceptors.request.use(config => config, error => {
  // Do something with request error
  console.log(error) // for debug
})

// response block拦截配置
service.interceptors.response.use(response => response, error => {
  Message({
    message: error.message,
    type: 'error'
  })

  const status = error.response.status
  if (status === 401) {
    store.dispatch('FedLogOut').then(() => {
      location.reload()
    })
  }
  if (status === 403) {
    router.push('/403')
  }
  return Promise.reject(error)
})

export default service

使用方法

1、根据功能创建目录

在src目录下创建api目录 如下图

创建对应的api.js

import fetch from 'utils/fetch'
//1.get
<!--方法-->
export function getWxCodeApi(params) {
  return fetch({
    url: '/carrier/generateQrCode',
    method: 'get',
    params,
    
  })
}
//2 .post实例
export function updateCarrier(data) {
  return fetch({
    url: '/carrier/updateCarrier',
    method: 'post',
    data,
  })
}

2、文件中使用接口方法

• 引入js

import { customerOptions } from "/api/delivery.js";

• 调用方法

getcustomer(){
<!--customerOptions  就是js文件引入的方法-->
      customerOptions().then(res =>{
      })
    },