vue3项目实战之在线客服-④使用axios

1、安装axios

> npm install axios --save

2、创建request文件

import axios from 'axios'
import { useUserStore } from '@/stores/user'

//1. 创建axios对象
const service = axios.create();

//2. 请求拦截器
service.interceptors.request.use(config => {
    const userStore = useUserStore();
    let token = userStore.token;
    if (token) {
        config.headers['Token'] = token
    }
    return config
}, error => {
    Promise.reject(error)
})


//3. 响应拦截器
service.interceptors.response.use(response =>{
    return  response.data;
}, error=>{
    return Promise.reject(error)
})

export default  service

3、配置vite.config.js, 增加service配置项

export default defineConfig({
  	server:{
		proxy:{
			'/api':'http://127.0.0.1:8088'
		}
	}
})

4、使用request

import { loginByToken } from "../utils/api/login.js";

const login = () => {
  if (token.value == "") {
    return layer.msg("Token不能为空");
  }
  loginByToken({ token: token.value })
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
        console.log(err)
    });
};