Vue3使用axios

一、如果你使用的是选项式API，请使用以下方式

1. 在项目根目录执行add安装命令

npm install axios -S

2. 在路径"/src/plugnis/"下修改或创建"axios.js"文件为以下内容

'use strict'

import axios from 'axios'

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || ''
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

const config = {
  // baseURL: "http://127.0.0.1:9000"
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
}

// 创建Axios对象
const Axios = axios.create(config)

// 请求拦截器
Axios.interceptors.request.use(
  config => {
    // Do something before request is sent
    return config
  },
  error => {
    // Do something with request error
    return Promise.reject(error)
  }
)

// 响应拦截器
Axios.interceptors.response.use(
  response => {
    // Do something with response data
    return response
  },
  error => {
    // Do something with response error
    return Promise.reject(error)
  }
)

export default {
  install (App) {
    // 挂载axios到Vue对象
    App.config.globalProperties.$http = Axios
  }
}

3. 在"/src/main.js"文件中添加如下代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Axios from './plugins/axios'

// 创建一个App
const app = createApp(App)
// 挂载Axios
app.use(Axios)
// 挂载路由
app.use(router)
// 绑定DOM
app.mount('#app')

4. 使用方法

// 任意组件中使用
this.$http({
  url: '/api/user',
  method: 'GET'
  params: {
	id: '123'
  }
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

如上就可以愉快的使用了

---

二、如果你使用的是组合式API，请使用以下方式（用TS写的，JS会更简单些）

1. 在项目根目录执行add安装命令

npm install axios -S

2. 在路径"/src/plugnis/"下修改或创建"axios.ts"文件为以下内容

// import { useRouter } from 'vue-router';
// import { UseAuthStore } from "@/stores/auth"
import Axios from "axios"

/**
 * API服务器接口访问域名
 */
export const ApiBaseUrl = (
    import.meta.env.DEV
        // ? 'https://api.yoga.bearki.cn'
        // : ''
        ? 'http://127.0.0.1:8088'
        : ''
)

/**
 * 服务器返回的自定义数据结构
 */
export interface ApiResponse<T> {
    code: number, // 服务器返回的自定义状态码
    msg: string, // 服务器返回的自定义状态码描述
    data: T, // 服务器返回的自定义数据
}

/**
 * 服务器返回的分页数据结构
 */
interface ApiPaginationData<T> {
    dataTotal: number               // 数据总量
    pageCap: number                 // 单页容量
    pageIndex: number               // 当前页码
    pageTotal: number               // 总页数
    data: Array<T>                  // 数据列表
}

/**
 * 服务器返回的分页自定义数据结构
 */
export type ApiPaginationResponse<T> = ApiResponse<ApiPaginationData<T>>

/**
 * API接口请求实例（不含登录状态拦截器）
 * 
 * 注意：【除非特殊情况，否则不要使用该实例】
 * 例如：在进入登录页面时检查授权有效性时必须使用不含授权验证拦截器的实例，
 * 否则会在验证和跳登录页面之间死循环，那么这时就需要使用该实例了
 */
const ApiRequest = Axios.create({
    baseURL: ApiBaseUrl,
    headers: {
        'Content-Type': 'application/json'
    },
    responseType: 'json',
    timeout: 3000
})
// 添加请求拦截器
ApiRequest.interceptors.request.use(
    (cfg) => {
        // // 授权信息储存器
        // const useAuthorizationStore = UseAuthStore()
        // // 追加授权校验头
        // cfg.headers.setAuthorization(useAuthorizationStore.GetAuthorization)
        return cfg
    },
    (err) => {
        // 请求发生错误
        return Promise.reject(err)
    }
)
// 添加响应拦截器
ApiRequest.interceptors.response.use(
    (res) => {
        // 检查HTTP状态码是否非200
        if (res.status != 200) {
            // 触发异常
            return Promise.reject(res)
        }
        // 正常返回结果
        return res
    },
    (err) => {
        return Promise.reject(err)
    }
)

/**
 * API接口请求实例（包含登录状态拦截器）
 * 
 * 除非会发生重定向到login页面触发死循环的风险，否则所有接口都应该使用该实例
 */
const ApiRequestAuth = Axios.create({
    baseURL: ApiBaseUrl,
    headers: {
        'Content-Type': 'application/json'
    },
    responseType: 'json',
    timeout: 3000,
})
// 添加请求拦截器
ApiRequestAuth.interceptors.request.use(
    (cfg) => {
        // // 授权信息储存器
        // const useAuthorizationStore = UseAuthStore()
        // // 追加授权校验头
        // cfg.headers.setAuthorization(useAuthorizationStore.Authorization)
        return cfg
    },
    (err) => {
        // 请求发生错误
        return Promise.reject(err)
    }
)
// 添加响应拦截器
ApiRequestAuth.interceptors.response.use(
    (res) => {
        try {
            // 检查HTTP状态码是否非200
            if (res.status != 200) {
                // 触发异常
                return Promise.reject(res)
            }
            // // 断言是否为ApiResponse
            // const r = res.data as unknown as ApiResponse<unknown>
            // // 服务器自定义状态码是否为未登录
            // if (r.code == 401) {
                // // 跳转到登录页
                // router.replace({ path: '/login' })
                // // 触发异常
                // return Promise.reject(res)
            // }
            // 正常返回结果
            return res
        } catch (err) {
            // 正常返回结果
            return res
        }
    },
    (err) => {
        return Promise.reject(err)
    }
)


/**
 * 导出API请求实例
 */
export { ApiRequest, ApiRequestAuth }

3. 使用方法

// 任意组件中使用
import { ApiRequest, ApiRequestAuth, type ApiResponse } from "/src/plugnis/axios"

/**
 * 用户名密码
 */
interface AuthNamePassword {
    name: string, // 用户名
    password: string, // 用户密码
}

/**
 * 用户名密码获取授权
 */
async function getAuthNamePassword(params: AuthNamePassword) {
	try {
		// 执行请求
		const { data: { code, msg, data} } = ApiRequestAuth.post<ApiResponse<string>>('/api/v1/auth/name/passwd', params)
		if ( code != 200 ) {
			// 异常处理
			console.error(msg)
			return
		}
		if ( data == undefined || data == null) {
			// 异常处理
			return
		}
		// 正常逻辑
		console.log(data)
	} catch (e) {
		// 异常处理
		console.error(e)
		return
	}
}

如上就可以愉快的使用了