vue3 axios 封装

一、介绍

二、代码

三、问题

 

一、介绍

　　Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

　　这里介绍的是在vue3中怎么封装

二、代码

　　1. 基本使用

　　1.1 安装

npm install axios

　　1.2 简单使用

　　1.2.1 局部使用

import axios from 'axios'
const getData = async ()=>{
  const response = await axios.get('/get_data')
  console.log(response ); 
}

　　1.2.2 全局注入

　　在main.js 文件里写入

// 在main.js 文件里面
// 第一种方式 注入
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.provide('$axios',axios)
app.mount('#app')


// 第二种方式 使用全局变量
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')

　　在局部使用

// 第一中方式的局部引用
const axios = inject('$axios')
const response = await axios.get('/get_data')
console.log(response);

// 第二种方式的局部引用
import {getCurrentInstance} from "vue"
const {proxy} = getCurrentInstance()
const response = await proxy.$axios.get('/get_data')
console.log(response);

　　2 封装

　　2.1 单独创建一个api.js

import axios from 'axios'

import { useCookies } from "vue3-cookies";
import router from '@/router'


const { cookies } = useCookies();

axios.defaults.timeout = 50000;


// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    config.headers['X-CSRFToken'] = cookies.get("csrf_token")
    if(config.method.toUpperCase() === 'POST') {
      config.headers['Content-Type'] = 'application/json;charset=utf-8'
    }
    return config
  },
  error => {
    return Promise.error(error)
  })

// 返回拦截器
axios.interceptors.response.use(
    res => {
        const back_data = res.data
        if (back_data.code === 20000){
            router.push('/login')
        }
        return Promise.resolve(res);
    }, 
    error => {
        switch (error.response.status) {
        case 500:
            ElMessage.error('Oops,Server Error.')
            break
        case 404:
            ElMessage.error('Oops, Not Find!')
            break
        case 400:
            // ElMessage.error('Oops, 400!')
            break
        // 其他错误，直接抛出错误提示
        default:
            ElMessage.error(error.message)
        }
        return Promise.reject(error);
    }
);

function f_base_get (url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, params)
        .then(res => {
            resolve(res.data)
        })
        .catch(err => {
            reject(err)
        })
    })
}

function f_base_post(url, params){
    return new Promise((resolve, reject) => {
      axios.post(url, params)
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        })
    })
}

//  将Promise 的错误统一捕获
export async function post (url, params) {
    let back = null
    try{
        back = await f_base_post(url, params)
    }catch(e){
        if (e.response.data === 'The CSRF token is missing.'){
            console.log('CSRF token miss, try again')
            back = await post(url, params)
        }
        console.log('async post', e)
    }
    return back
}

export async function get(url, params) {
    let back = null
    try{
        back = await f_base_get(url, params)
    }catch(e){
        console.log('async get', e)
    }
    return back
}

　　2.2 单独创建一个 url.js

import {get, post} from './api'

export const apiCodeImg = p => get('/api/auth/graphicCode', p)

　　2.3 在页面里调用

import { apiCodeImg } from '@/api/urls.js'

const get_img_code = async () => {
    const res = await apiCodeImg()
    imgBase64.value = res.data.img
}
get_img_code()

　　3.补充

　　这样的封装，将 axios 封装在一个文件里，可以在api.js 文件里 处理请求时带上token, csrf等参数， 还可以检查登录状态跳转登录， 还有错误捕获等，都可以统一在这里处理。

　　再新建一个 url.js 这样可以统一管理与后端接口的地址，降低耦合度。

　　再局部页面，进行专一接口调用，更清楚，代码更加简洁。

 

三、问题