axios封装（vue3.0环境）_vue3中封装axioa

1、http.js

/***
 * 当前端的不在处理跨域的时候需要修改请求的路径 ==> /api
 */
import axios from 'axios'
//导入vant的函数
import {Toast } from 'vant';
//导入登录的工具类
import {login} from '@/assets/js/login.js'
//获取路由的实列
import router from '../router/index'
// 环境的切换
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://192.168.0.56:8080/ebrochure' // 开发环境
} else if (process.env.NODE_ENV === 'debug') {
  axios.defaults.baseURL = '' // 调试环境
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = '' // 生产环境
}
axios.defaults.timeout = 10000 //设置延迟时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data'
// 允许当前axios携带cookie
axios.defaults.withCredentials = true
 
// 请求拦截器
axios.interceptors.request.use(
  config => {
 
    // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    // const token = this.$store.state.Authorization
    // token && (config.headers.Authorization = token)
    // return config
    // if (localStorage.getItem('Authorization')) {
    //       config.headers.Authorization = localStorage.getItem('Authorization');
    //     }
    config.headers.Authorization = localStorage.getItem('Authorization');
    return config;
  },
  error => {
    return Promise.error(error)
  })
 
  // 响应拦截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  // 服务器状态码不是200的情况
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。
        case 401:
          // router.replace({
          //   path: '/Login',
          //   query: {
          //     redirect: router.currentRoute.fullPath
          //   }
          // })
          login()
          break;
        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
          Toast({
            message: '登录过期，请重新登录',
            duration: 1000,
            forbidClick: true
          })
          // 清除token
          localStorage.removeItem('Authorization')
          // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
          // setTimeout(() => {
          //   router.replace({
          //     path: '/Login',
          //     query: {
          //       redirect: router.currentRoute.fullPath
          //     }
          //   })
          // }, 1000)
          login()
          break;
        // 404请求不存在
        case 404:
         Toast({
            message: '网络请求不存在',
            duration: 1500,
            forbidClick: true
          })
          break;
        // 其他错误，直接抛出错误提示
        default:
          Toast({
            message: error.response.data.message,
            duration: 1500,
            forbidClick: true
          })
      }
      return Promise.reject(error.response)
    }
  }
)
 
/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

2、api.js

import { get, post } from './http'
export const api1 = p1 => get('http://v.juhe.cn/toutiao/index?type=&page=&page_size=&key=24a7d6a478f8bf2c367c749e598d2cc2', p1)
export const api2 = p2 => get('http://10.22.160.24:8888/lanlema/user/toLogin', p2)
export const api3 = p => post('/login', p)

3、使用

import { api1, api2, api3 } from '@/utils/api'// 导入我们的api接口
 
const apiGet=async ()=> {
      // 调用api接口，并且提供了两个参数
      api2({
        // type: 0,
        // sort: 1
      }).then(res => {
        // success
        console.log(res)
      }).catch((error) => {
        // error
        console.log(error)
      })
    }
 const apiPost=async ()=> {
      // 调用api接口，并且提供了两个参数
      let postData = {
          tel: 'wangming',
          pwd: '12345678'
        }
        api3(postData).then(res => {
          // success
          console.log(res)
        }).catch((error) => {
          // error
          console.log(error)
        })
 
    }
     onMounted(() => {
      // getInTheatersDate()
      apiPost()
    })