关于前端:封装自己的axios请求

引入 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>

欢送交换！