vue3 +TS axiox接口模块添加，fast mock接口访问测试

目录

一.接口地址

二.apipost 接口测试，能否接通

三.安装axiox

1.下载安装依赖

2.新建src/utils/request.ts文件

2.1解释：后续后端真实接口需要替换baseURL，目前没有使用配置文件，后续更换

3.新建src/utils/storage.ts文件

4.新建src/utils/formDataFormat.ts文件，

5.修改vite.config.ts文件，添加代理转发

5.1解释：后面后端真实接口直接替换即可

6.新建src/api/login 文件夹

 7.目录结构

二.测试使用

1.修改login.vue文件

2.测试效果

三.一些说明修改

1.stores/interface/index.ts修改

2.stores/states.ts修改

---

一.接口地址

fastmock接口项目地址：

https://www.fastmock.site/mock/b9536a1dea3fe4daeec18bc365e14a18/api

登录接口 ,完整引用路径（apipost测试时使用）：

https://www.fastmock.site/mock/b9536a1dea3fe4daeec18bc365e14a18/api/login

相对路径,后面在api/login/index.ts里使用

/login

二.apipost 接口测试，能否接通

进入软件，新建一个接口即可，测试如下

登录信息,注意是body的raw的json格式

{

    "username":"admin",

    "password":"admin"

}

三.安装axiox

1.下载安装依赖

npm install axios
npm install @types/axios --save-dev

用来使用Cookie
npm install js-cookie
npm install @types/js-cookie --save-dev

2.新建src/utils/request.ts文件

根据需求，相应的更改

2.1解释：后续后端真实接口需要替换baseURL，目前没有使用配置文件，后续更换

import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '@/utils/storage';

// 配置新建一个 axios 实例
const service = axios.create({
	baseURL: 'https://www.fastmock.site/mock/b9536a1dea3fe4daeec18bc365e14a18/api',
	timeout: 50000,
	headers: { 'Content-Type': 'application/json' },
});

// 添加请求拦截器
service.interceptors.request.use(
	(config) => {
		// 在发送请求之前做些什么 token
		if (Session.get('token')) {
			(config.headers).common['token'] = `${Session.get('token')}`;
		}
		return config;
	},
	(error) => {
		// 对请求错误做些什么
		return Promise.reject(error);
	}
);

// 添加响应拦截器
service.interceptors.response.use(
	(response) => {
		// 对响应数据做点什么
		const res = response.data;
		if (res.code && res.code !== '2000') {
			// `token` 过期或者账号已在别处登录
			if (res.code === 401 || res.code === "4001") {
				Session.clear(); // 清除浏览器全部临时缓存
				window.location.href = '/'; // 去登录页
				ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
					.then(() => {})
					.catch(() => {});
			}
			return response.data;
			// return Promise.reject(service.interceptors.response);
		} else {
			return response.data;
		}
	},
	(error) => {
		// 对响应错误做点什么
		if (error.message.indexOf('timeout') != -1) {
			ElMessage.error('网络超时');
		} else if (error.message == 'Network Error') {
			ElMessage.error('网络连接错误');
		} else {
			if (error.response.data) ElMessage.error(error.response.statusText);
			else ElMessage.error('接口路径找不到');
		}
		return Promise.reject(error);
	}
);

// 导出 axios 实例
export default service;

3.新建src/utils/storage.ts文件

持久化处理

import Cookies from 'js-cookie';

/**
 * window.localStorage 浏览器永久缓存
 * @method set 设置永久缓存
 * @method get 获取永久缓存
 * @method remove 移除永久缓存
 * @method clear 移除全部永久缓存
 */
export const Local = {
	// 设置永久缓存
	set(key: string, val: any) {
		window.localStorage.setItem(key, JSON.stringify(val));
	},
	// 获取永久缓存
	get(key: string) {
		let json: any = window.localStorage.getItem(key);
		return JSON.parse(json);
	},
	// 移除永久缓存
	remove(key: string) {
		window.localStorage.removeItem(key);
	},
	// 移除全部永久缓存
	clear() {
		window.localStorage.clear();
	},
};

/**
 * window.sessionStorage 浏览器临时缓存
 * @method set 设置临时缓存
 * @method get 获取临时缓存
 * @method remove 移除临时缓存
 * @method clear 移除全部临时缓存
 */
export const Session = {
	// 设置临时缓存
	set(key: string, val: any) {
		if (key === 'token') return Cookies.set(key, val);
		window.sessionStorage.setItem(key, JSON.stringify(val));
	},
	// 获取临时缓存
	get(key: string) {
		if (key === 'token') return Cookies.get(key);
		let json: any = window.sessionStorage.getItem(key);
		return JSON.parse(json);
	},
	// 移除临时缓存
	remove(key: string) {
		if (key === 'token') return Cookies.remove(key);
		window.sessionStorage.removeItem(key);
	},
	// 移除全部临时缓存
	clear() {
		Cookies.remove('token');
		window.sessionStorage.clear();
	},
};

4.新建src/utils/formDataFormat.ts文件，

处理访问接口时传递参数格式

export function objectToFormData(obj: Record, form?: FormData, namespace?: string): FormData {
  const fd = form || new FormData();
  let formKey: string;

  for (const property in obj) {
    if (obj.hasOwnProperty(property)) {
      const key = Array.isArray(obj) ? '[]' : `[${property}]`;

      if (namespace) {
        formKey = `${namespace}${key}`;
      } else {
        formKey = property;
      }

      // 如果属性是对象，但不是 File 对象，则递归调用 objectToFormData 处理嵌套对象
      if (typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
        objectToFormData(obj[property], fd, formKey);
      } else {
        // 如果属性值是字符串或 File 对象，直接添加到 FormData
        fd.append(formKey, obj[property]);
      }
    }
  }

  return fd;
}

5.修改vite.config.ts文件，添加代理转发

5.1解释：后面后端真实接口直接替换即可

添加部分

 server: {
    host: '0.0.0.0',
    port: 5000,
    open: true,
    proxy: {
      '/api': {
        target: 'https://www.fastmock.site/mock/b9536a1dea3fe4daeec18bc365e14a18/api',
        ws: true,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },

目前为止的完整文件内容

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// 以下为按需导入，自动引入手动导入element plus
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
//手动导入element plus 时
// import ElementPlus from 'unplugin-element-plus/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // ElementPlus({
      
    // } ),//手动导入element plus 时

    // 以下为按需导入，自动引入手动导入element plus
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    extensions: ['.vue', '.ts'],
    alias: {
      "@": path.resolve(__dirname, "src"),
    }
  },
  server: {
    host: '0.0.0.0',
    port: 8888,
    open: true,
    proxy: {
      '/api': {
        target: 'https://www.fastmock.site/mock/b9536a1dea3fe4daeec18bc365e14a18/api',
        ws: true,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})

 

6.新建src/api/login 文件夹

新建src/api/login/index.ts文件以及src/api/login/types.ts文件

// login/index.ts
import request from '@/utils/request';
import { objectToFormData } from "@/utils/formDataFormat";// post请求参数是form-data时，使用此方法处理数据
import { LoginState } from './types';

/**
 * 登录api接口集合
 * @method login用户登录
 * @method logout用户退出登录
 */
export function UseLoginApi() {
	return {
		login: (params: LoginState) => {
			return request({
				url: '/login',
				method: 'post',
				data: objectToFormData(params),
			});
		},
		// logout: (params: object) => {
		// 	return request({
		// 		url: '/logout',
		// 		method: 'post',
		// 		data: objectToFormData(params),
		// 	});
		// },
	};
}

// login/types.ts
// 登录参数类型
export interface LoginState{
  username:string;
  password:string
}
// 拿到的用户数据类型定义
export interface UserInfoState{
  user:string;
  ID:string;
  age:string | number ;
  sex:string
}

 7.目录结构

二.测试使用

1.修改login.vue文件

添加内容

import { UseLoginApi } from "@/api/login/index"
import { LoginState } from "@/api/login/types";

const useLoginApi = UseLoginApi()
const login = () => {
  let data: LoginState = {
    username: "admin",
    password: "admin"
  }
  useLoginApi.login(data)
    .then((res) => {
      console.log(res);

    })
    .catch((err) => {
      console.log(err);

    })
}

完整login.vue文件内容