在Vue中，axios封装、api封装、调接口

1.封装请求

 （1）utils->request.js

• 引入axios、token，定义请求头格式
• 定义基础路径
• 创建axios实例--配置路径
• 请求拦截器
• 响应拦截器
• 向外界暴露请求的基础路径和axios实例对象

import axios from 'axios'
import { getToken } from '@/utils/auth'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';

//1.定义基础路径
const baseUrlLogin = 'http://192.168.3.54:8010';//dev2-login
const baseUrlOther = 'http://192.168.3.54:8011';//dev2-other

//2. 创建axios实例
const service = axios.create({
  baseURL:baseUrlOther, //配置默认的baseURL
  timeout: 30000，// 超时
})
//3. request请求拦截器（必须登录[含有token],才能发出请求）
service.interceptors.request.use(
  config => {
//获取token,存在时设为请求头
//const token = window.sessionStorage.getItem("token")
//if(token){
 //config.headers.Authorization = token
//} 
//return config
    if (getToken()) {
      config.headers['tokenKey'] = "merchantToken"; // 让每个请求携带自定义token 请根据实际情况自行修改
      config.headers['merchantToken'] =getToken();
    }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)
// 4.响应拦截器--（处理返回的数据）
service.interceptors.response.use(response => {
    // console.log(response);
    // 对响应数据做点什么
    let data = response.data;
    let errorCode = data.code;
    if (errorCode==200){//成功
      return data;
    } else if (errorCode == 401) {//token失效,会话过期
//移除token,即退出登录
//window.sessionStorage.removeItem("token")
      vue.$store.dispatch("LogOut");
      vue.$message.error("会话过期，请重新登陆");
      return Promise.reject("会话过期");
    }else {
      return Promise.reject(data);
    }

  }, (error) => {
    // 对响应错误做点什么
    console.log(error);
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      vue.$message.error("服务器异常，请稍后重试");
      return Promise.reject('服务器异常，请稍后重试');
    } else {
      // Something happened in setting up the request that triggered an Error
      vue.$message.error("网络异常，请稍后重试");
      return Promise.reject('网络异常，请稍后重试');
    }
  }
)
//5.向外界暴露
export {baseUrlLogin,baseUrlOther,service}

（2）Api->login.js

• 引入基础路径和axios实例对象
• 封装接口函数，并暴露出来

//1.引入基础路径和axios实例
import {baseUrlLogin,baseUrlOther,service} from '@/utils/request'

export function queryWikiList(pageNum,pageSize,data) {
  return service({
    url: `/web/wiki/queryWikiList?pageNum=${pageNum}&pageSize=${pageSize}`,
    method: 'post',
    data:data
  })
}
//2.封装接口函数，并暴露出来
export function getWikiDetail(id) {
  return service({
    url: `/web/wiki/getWikiDetail?id=${id}`,
    method: 'get'
  })
}

（2）Vue组件中调用api函数

• 引入接口函数
• 在方法中调用函数，获得接口数据

//1.引入接口函数
import { getWikiDetail } from '@/api/home'
//2.在方法中调用接口函数，获得接口数据
getWikiDetail().then(res =>{
console.log(res) // 就是请求回来的结果 
}).catch(err=>{
console.log(err)
})