Nuxt3 axios封装 使用axios接口请求

一、先安装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为自定义命名)，在浏览器中显示
                }
              }
            }
          }
    },
})