统一封装axios

1.  

// 通用接口调用模块
import axios from 'axios'
import store from '@/store'
import router from '@/router'

// 接口调用基准路径
export const baseURL = ''

// 创建一个独立的实例对象
const instance = axios.create({
  baseURL: baseURL
})

// 响应拦截器
instance.interceptors.response.use(res => {
  // 把返回的数据去掉一层data属性
  return res.data
}, err => {
  // 处理token实现的问题
  if (err.response && err.response.status === 401) {
    // token失效了，跳转到登录页
    return router.push('/login')
  }
  return Promise.reject(err)
})

// 请求拦截器
instance.interceptors.request.use(config => {
  // 统一添加请求头
  const token = store.state.user.profile.token
  if (token) {
    // 已经登录成功，统一添加token
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, err => {
  return Promise.reject(err)
})

// 封装通用的接口调用方法
export default (options) => {
  return instance({
    method: options.method || 'GET',
    url: options.url,
    // ES6规则：对象的key可以是动态的变量
    [options.method.toUpperCase() === 'GET' ? 'params' : 'data']: options.data
  })
}

// import request from './request.js'
// request({
//   method: 'post',
//   url: '#',
//   data: {
//     account: 'admin',
//     pwd: 123
//   }
// })

2

1. request.js

// 导出一个axios的实例  而且这个实例要有请求拦截器 响应拦截器
import axios from 'axios'
// const service = axios.create() // 创建一个axios的实例
const service = axios.create({
  // 统一封装 线上演示地址
  // baseURL: 'http://ihrm-java.itheima.net',
  // 环境变量的基地址配置 带有api
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
// service.interceptors.request.use() // 请求拦截器
// service.interceptors.response.use() // 响应拦截器
import store from '@/store'
import router from '@/router'
// 请求拦截器
service.interceptors.request.use(
  config => {
    const token = store.state.user.token
    // 如果当前存有token,就加在请求头上
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// // 响应拦截器
service.interceptors.response.use(
  response => {
    // console.log('响应拦截器', response)
    if (response.data.success) {
      // 操作成功  直接返回data promise会在外面套层壳
      return response.data
    } else {
      // 抛出错误
      // 如果success为false 业务出错,直接触发reject
      // 被catch分支捕获
      return Promise.reject(new Error(response.data.message))
    }
  },
  error => {
    // do something with request error
    // console.log(error) // for debug
    // token 失效
    if (error.response && error.response.data && error.response.data.code === 10002) {
      store.dispatch('user/userLayout') //清空信息
      // router.push('/login') // 返回login页面，补充回调地址
      router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.fullPath))
    }
    return Promise.reject(error)
  }
)

export default service // 导出axios实例

2.  api.js

import request from '@/utils/request'

// get请求
export function getRoles(params) {
  return request({
    url: '/sys/role',
    method: 'GET',
    params
  })
}

// post请求
export function addRolesAPI(data) {
  return request({
    url: '/sys/role',
    method: 'POST',
    data
  })
}

3. 使用接口页面

import { addDepartments } from '@/api/departments'

   async doAdd() {
      const res = await addDepartments({
       // 参数
        code: this.form.code,
        introduce: this.form.introduce,
        manager: this.form.manager,
        name: this.form.name,
        pid: this.newId
      })
      console.log('res', res)
      // 通知父组件更新
      this.$emit('success')
    },