一、介绍

对axios进行封装以及将API接口按业务模块统一管理，有助于我们简化代码，方便后期维护；也可以方便的统一对请求API进行修改

二、Vue实战

1、Axios全局配置文件

import axios from 'axios'
import {
     
        Message } from 'element-ui'

// 创建axios实例
const service = axios.create({
     
       
    baseURL: 'http://localhost:8090', // api 的 base_url
    timeout: 20000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
    config => {
     
       
        //每次请求之前判断vuex中是否存在token
        //如果存在，则统一在http请求的header上都加上token，以便后台根据token判断当前登陆情况
        //即使本地存在token，也有可能过期，所以需要对返回状态进行判断
        const token = localStorage.getItem("token");
        if (token && (config.headers.Authorization = token)) {
     
       
          config.headers['Authorization'] = token; 
        }
        return config
    },
    error => {
     
       
        // Do something with request error
        Promise.reject(error)
    }
)

// response 拦截器
service.interceptors.response.use(
    response => {
     
       
        const res = response.data
        if (res.code < 0) {
     
       
            Message({
     
       
                message: res.message,
                type: 'error',
                duration: 5 * 1000
            })
            return Promise.reject('error')
        } else {
     
       
            // 注意：这里务必要返回配置对象，否则请求就停在这里出不去了
            return response.data
        }
    },
    error => {
     
       
        Message({
     
       
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        // 如果请求出错了（还没有发出去）会进入这里
        return Promise.reject(error)
    }
)
// 响应拦截器
export default service

2、设置统一API管理

这里注意的是@代表的是src目录，同时配置接口后要记得返回

import request from '@/utils/request'

export default{
     
       
 
  //查询订单列表
  list() {
     
       
    return request({
     
       
      url: '/api/order-info/list',
      method: 'get'
    })
  },

  queryOrderStatus(orderNo) {
     
       
    return request({
     
       
      url: '/api/order-info/query-order-status/' + orderNo,
      method: 'get'
    })
  }
}

3、业务逻辑

最后在业务逻辑处理页面进行调用

<script>
import orderInfoApi from "../api/orderInfo"

export default {
     
       
methods: {
     
       

    //显示订单列表
    showOrderList(){
     
       
      orderInfoApi.list().then((response) => {
     
       
        this.list = response.data.list;
      });
    }
  }
}
</script>