1 需要工具

js-cookie依赖
auth.ts //处理token
request.ts //封装

2 具体步骤

1）安装js-cookie

npm install js-cookie
//失败就强制安装，npm install js-cookie --force

2) 创建auth.ts文件

文件内容如下：

import Cookies from "js-cookie"

const TokenKey = 'vue_token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token:string) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

3) 创建request.ts文件

内容如下：

import axios from 'axios'
import { ElMessage  } from 'element-plus'
import { getToken } from './auth'//这里是刚刚创建的auth.ts文件，引入进来

export  const request =(options:any)=> {
    return new Promise((resolve, reject) => {

        // create an axios instance
        const service = axios.create({
            // baseURL: process.env.BASE_API, // api 的 base_url
            baseURL: 'http://xxxx:8080/',//这里填写后端的ip和端口号
            timeout: 80000 // request timeout
        })

        // request interceptor
        service.interceptors.request.use(
            (config:any) => {
                const token:string | undefined =getToken()//此处换成自己获取回来的token，通常存在在cookie或者store里面
                if (token) {
                    // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
                    config.headers['X-Token'] = token

                    config.headers.Authorization =  + token
                }
                return config
            },
            error => {
                // Do something with request error
                console.log("出错啦", error) // for debug
                Promise.reject(error)
            }
        )
        // response interceptor
        service.interceptors.response.use(
            (response:any) => {
                return response.data
            },
            error => {
                console.log('err' + error) // for debug
                if(error.response.status == 403){
                    ElMessage.error('错了')
                }else{
                    ElMessage.error('服务器请求错误，请稍后再试')
                }
                return Promise.reject(error)
            }
        )
        // 请求处理
        service(options)
            .then((res) => {
                resolve(res)
            })
            .catch((error) => {
                reject(error)
            })
    })
}
export default request

4）使用

使用方法一般分为有参与无参，有参中传参也分为普通参数与对象；所有的访问方法建议新建一个接口文件，统一写在里面
这里新建一个文件 xxxapi.ts

(1) 无参

import {request} from './request'//导入request
export function getListAPI() {
    return request({
        url: 'xxxxaList/getxxxList',//此处为自己请求地址
        method: 'get',//请求类型
    })
}

(2) 有参

（a）params（普通变量参数）

import {request} from './request'//导入request
export function getListAPI(val:string) {//不确定类型，可以使用any——val:any
    return request({
        url: '/xxxxList/getxxxList',//此处为自己请求地址
        method: 'get',//请求类型
        params:{//如果后端是spring，用@RequestParams接收
        	val:val,//如果传多个，直接继续加即可
        }
    })
}

（b）data（对象参数）

如果想整体传一个对象，则需要引入一个interface（一般专门放在一个ts文件，然后导入进来，这里不过多描述，详细使用请看另一篇博客）

import {request} from './request'
import {ListData} from '../entityapi/base'//导入相应对象接口
export function xxxInfoAPI(listData: ListData) {
    return request({
        url: '/xxxList/add_xxx',//此处为自己请求地址
        method: 'post',
        data:listData//data是传对象,如果后端是spring，用@RequestBody接收
    })
}

（c）混合使用

import {request} from './request'
import {ListData} from '../entityapi/base'//导入相应对象接口
import {Else} from '../entityapi/base' //其他对象，前端传对象，就要用对象接受，而对象必须得创建对应接口interface，然后导入
export function xxxInfoAPI(listData: ListData,else:Else, val:number) {
    return request({
        url: '/xxxList/add_xxx',//此处为自己请求地址
        method: 'post',
        params:{//如果后端是spring，用@RequestParams接收
        	paramOne:else.one,
        	paramTwo:else.two,
        	paramThree: val
        }
        data:listData//data是传对象,如果后端是spring，用@RequestBody接收
    })
}

3 Vue界面调用

先导入接口
import {getListAPI} from "@/api/xxxapi";//方法名与写的要对应
然后使用

function onnSubmit(){
  getListAPI(state.infoList).then((res:any)=> {//有参传参，无参就不传
    console.log(res)
  })
}

4 结语

基本的调用方法就是这样，由于时间有限，没有具体描述有参时，传的对象如何封装，而Vue3与Vue2相差巨大，使用对象也是有不同，后面会找时间专门详细写一下具体步骤，如何创建对象以及如何一步步调用方法请求后端接口