一、先安装axios npm install add axios
封装请求request.ts文件
import axios from 'axios'import { ElMessage, Message } from "element-plus"import {getToken} from './token.js'const service = axios.create({ baseURL:'/api',//本地使用})service.interceptors.request.use( config => { const token = getToken() //登录后获取token if(token){ config.headers.token = `${token}` } return config }, err => { return Promise.reject(err) })service.interceptors.response.use( response => { if (response.data.code != 200) { return Promise.reject(response.data) } else { return response.data } }, error => { console.log('error:', error) if(error.response){ if(error.response.status == 304){ ElMessage({ message: error.response.data.msg, type: 'error', duration: 2000 //提示持续2秒 }) } else if(error.response.status == 400){ ElMessage({ // message: response.data.message, message:'请求参数错误,状态码400!', type: 'error', duration: 2000 //提示持续2秒 }) } else if(error.response.status == 401){ ElMessage({ // message: response.data.message, message:'您还未登录或登录过期，请先登录！', type: 'error', duration: 2000 //提示持续2秒 }) } else if(error.response.status == 403){ ElMessage({ message: '您没有权限访问资源！', type: 'error', duration: 2000 //提示持续2秒 }) } else if(error.response.status == 404){ ElMessage({ message: '请求资源不存在！', type: 'error', duration: 2000 //提示持续2秒 }) } else if(error.response.status == 405){ ElMessage({ message: '请求地址错误', type: 'error', duration: 2000 //提示持续2秒 }) } else if(error.response.status == 500){ ElMessage({ message: '服务器错误！状态码500', // message:Response.data.message, type: 'error', duration: 2000 //提示持续2秒 }) } else if(error.response.status == 503){ ElMessage({ message: '服务器维修中，请稍后再试！状态码503', type: 'error', duration: 2000 //提示持续2秒 }) } else if(error.response.status == 504){ ElMessage({ message: '网关超时！状态码504', type: 'error', duration: 2000 //提示持续2秒 }) } else{ ElMessage({ message: '未知错误！状态码：'+error.response.data.code, type: 'error', duration: 2000 //提示持续2秒 }) } }else{ ElMessage({ message: '请求错误！请求服务器无响应！', type: 'error', duration: 2000 //提示持续2秒 }) } return Promise.reject(error.response) })export default service如果需要使用token，则写一个token.js文件，需要安装js-cookie,自行安装
import Cookie from 'js-cookie' const TokenKey = 'token' export function getToken() { return localStorage.getItem(TokenKey)} export function setToken(token) { return Cookie.set(TokenKey, token)} export function removeToken() { return localStorage.removeItem(TokenKey)}2.如果项目是前后端分离的，服务请求接口要请求后端给的接口，则需要开启请求代理
在nuxt.config.ts文件中
export default defineNuxtConfig({ .................其他配置vite:{server: {proxy: { '/api': {//后端的请求接口http://xxx.xxx.xxxx/api'target: 'http://xxx.xxx.xxxx', // 目标服务器地址changeOrigin: true, // 启用代理时，改变源地址// 其他可选配置...//写这段代码可以看到后端真正的代理请求接口bypass(req, res, options: any) {const realUrl = options.target + (options.rewrite ? options.rewrite(req.url) : '');console.log('realUrl:', realUrl); // 在终端显示res.setHeader('A-Real-Url', realUrl); // 添加响应标头(A-Real-Url为自定义命名)，在浏览器中显示} }} }},})