新手向axios的二次封装，以及接口统一管理（基于vue）

关于接口请求的封装，网上真的很多，可以说各种的都有，这里，我分享一下自己的请求封装（基于vue）

一、创建js文件

在公用的工具文件夹下创建request.js文件（名字不重要）

二、封装请求

import axios from 'axios'   //引入axios
import store from '@/store/index'   //引入vuex（只是一种储存手段，可以不用）
// 创建axios实例
const service = axios.create({
  timeout: 30000, // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  (config) => {
    config.headers = { //设置请求头
      'Content-Type': 'application/json;charset=UTF-8',
    }
    let oldToken = sessionStorage.getItem('Token')
    config.headers['Authorization'] = `Bearer ${oldToken}`   //token验证（不需要的可以删了）
    return config
  },
  (error) => {
    // Do something with request error
    Promise.reject(error)
  }
)
//这里是统一的错误处理，提示可以换成其他的
service.interceptors.response.use(
  (response) => {
    return response
  },
  async (error) => {
    console.log(error)
    if (error.message.includes('timeout')) {
      // 判断请求异常信息中是否含有超时timeout字符串
      alert('网络超时')
      return Promise.reject(error.response) // reject这个错误信息
    } else {
      alert('网络超时，请重试')
      return Promise.reject(error.response)
    }
  }
)

const AsyncAxios = function(url, type, data, that) { //base是请求的地址：https://www.baidu.com
  const base = that || store.state.url //that传参用that，不传用默认，防止个别请求地址不统一
    switch (type.toLowerCase()) {
      case 'get':
        return service
          .get(`${base}${url}`, {
            params: data,
          })
          .then((res) => res.data)
      case 'post':
        return service.post(`${base}${url}`, data).then((res) => res.data) 
      case 'put':   //post,put,delete三个请求，body带参形式同post，url带参同put
        return service    
          .put(`${base}${url}`, null, { params: data }) 
          .then((res) => res.data)
      case 'delete': 
        return service.delete(`${base}${url}`, {data}).then((res) => res.data)
    }
  
}
const Axios = AsyncAxios
export { Axios }

【注】正常的post 和 put 有三个参数，url , data , 和 config 。所以在使用这两个时，可以写成 axios.post(url,{param:xx}) , axios.put(url,{param:xx}), 但是delete只有两个参数： url 和 config ，data在config中，所以需要写成 axios.delete(url,{data:{param:xx}}) 。所以delete的封装与post以及put略有区别

三、api统一管理

新建api文件夹，为需要的页面新建对应的js,并写好路径

import { Axios } from '@/utils/request'  //引入封装的axios
export const Examples1= (data) =>
  Axios('/api/XXXXXX/XXXXXXX1', 'get', data) //参数分别对应url，type，data,that
export const Examples2= (data) =>
  Axios('/api/XXXXXX/XXXXXXX2', 'post', data)

四、需要的页面引用

在vue文件中

import { Examples1 , Examples2} from '@/api/Examples.js' //引入请求

//方法里面调用请求Examples1,Examples2写法一致
getData() {
     this.loading = true    //接口开始请求时显示loading图标
      let data = {
        参数一: 1,
        参数二: 2,
        参数三: 3,
      }
      Examples1(data).then((res) => {
          console.log('res -> :', res)
          if (res.code === 200) {
            //成功之后处理
          } else {
          //错误提示
            this.$notify.error({
              title: '错误',
              message: res.message,
            })
          }
          this.loading = false
        })
        .catch((err) => {
        //接口出问题
          console.log('err -> :', err)
          this.loading = false
        })
    },

封装就是这些，觉得有用的给点个赞哟，有问题的请留言