封装自己的axios请求

作为一个前端开发人员，不会封装自己的请求是很麻烦的，整理了一下我的封装过程，封装了请求和请求拦截、响应拦截，过程如下：
-->引入 axios 包

--> 写一个请求出错时用于提醒的方法

--> 通过 create 创建 axios 请求

----> 给 axios 配置基本信息 [baseURL(域名),timeout(超时时间)]

--> 通过 axios.interceptors.request.use 配置请求拦截，配两个参数:
----> config 可以配置一些信息 token 等 , config.headers.token = 'ssss'
----> error 表示请求出错->抛出异常 return Promiss.reject(error)

--> 通过 axios.interceptors.response.use 配置响应拦截, 配两个参数
----> res 表示服务端响应成功状态码为 200，根据返回的信息做出相应操作，return reslove(res)
----> error 表示请求出错，可以拿到 error 里面的 response ，let { response } = 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: '',
      studentId: '',
      billId: ''
    }).then(res => {
      console.log('请求成功',res);
    }).catch(err => {
      console.log('请求失败',err);
    })
  },
  toPost(){
    request.apiPost('pc/bill/classification/list-page',{
      startTime: '',
      endTime: '',
      name: '',
      schoolId: '',
      page: 1,
      row: 10
    }).then(res => {
      console.log('请求成功', res);
    }).catch(err => {
      console.log('请求失败', err);
    })
  }
}
}
</script>

<style scoped>

</style>

欢迎交流！