引入 axios 包
--> 写一个申请出错时用于揭示的办法
--> 通过 create 创立 axios 申请
----> 给 axios 配置根本信息 [baseURL(域名),timeout(超时工夫)]
--> 通过 axios.interceptors.request.use 配置申请拦挡，两个参数 config 能够配置一些信息 token 等，error 示意申请出错->抛出异样
--> 通过 axios.interceptors.response.use 配置响应拦挡, 两个参数 res & error ,res 示意服务端响应胜利状态码为 200， error 示意申请出错->抛出异样，须要依据错误码执行对应的操作(404....)
代码如下：
import axios from "axios";const errTips = msg => { alert(msg)}const service = axios.create({ baseURL: 填写自家域名, timeout: 10000})//申请拦挡service.interceptors.request.use( config =>{ //获取到缓存..中的token增加到申请头 let token = 'ssss' config.headers.token = token return config }, err => { errTips(err) return Promise.reject(err) })//响应拦挡service.interceptors.response.use( res => { //代表网络申请胜利了，stutas == 200 //判断接口返回的数据， 这里咱们后端也加了判断返回的 code 不等于 200 就没通过后端的校验 if(res.data.code !== 200){ errTips(res.data.msg) return Promise.reject(res.data) //抛出异样 }else{ return Promise.resolve(res.data) } }, error => { //网络申请出错 判断状态码做出相应的操作 let { response } = error switch (response.data.status){ //能够独自封装进来 case 404: errTips( `${response.data.status}-->${response.data.message}`) break; case 403: errTips( `${response.data.status}-->${response.data.message}`) break; default: errTips( `${response.data.status}-->${response.data.message}`) } return Promise.reject(error) })export default service申请封装好之后就能够封装对接口申请的 api 文件了，示例如下：
import request from '@/utils/request'export default{ apiGet(url, data){ return request({ url, params: data, method: 'get' }) }, apiPost(url, data){ return request({ url, data, method: 'post' }) }}接下来间接在页面引入就能应用了，示例如下：
<template> <div class="containter"> <button @click="toGet">点我</button> <button @click="toPost">post点我</button> </div></template><script>import request from '@/api/api.js'export default {data () { return { }},methods: { toGet(){ request.apiGet('pc/fee/bill/load-scheme',{ schoolId: '50899f90f9e211e7a9192c4d54595581', studentId: '', billId: '1524272640494178304' }).then(res => { console.log('申请胜利',res); }).catch(err => { console.log('申请失败',err); }) }, toPost(){ request.apiPost('pc/bill/classification/list-page',{ startTime: '', endTime: '', name: '', schoolId: '50899f90f9e211e7a9192c4d54595581', page: 1, row: 10 }).then(res => { console.log('申请胜利', res); }).catch(err => { console.log('申请失败', err); }) }}}</script><style scoped></style>欢送交换！