我们选择的是github
访问到axios官网
axios对前端的html请求做了一个封装
当然！Axios 是一个基于 Promise 的 HTTP 客户端，用于向服务器发起请求并处理响应。在前端开发中，Axios 常用于与后端进行数据交互，例如获取或提交数据。虽然 Axios 可以处理各种类型的请求，包括获取 JSON 数据、发送表单数据等，但它也可以用于处理 HTML 请求。
Axios 是一个功能强大的工具，用于在前端与后端进行通信。无论你是获取 JSON 数据还是 HTML 内容，Axios 都能提供简洁的接口来处理这些请求。在获取 HTML 内容时，你可以将其直接插入到页面的某个部分，或者进行进一步处理。
可以直接向后端发起请求
去webstrom里面安装
npm install axios
传统情况下
每个请求我们都是要单独编写代码
我们之前的开发是这样子的
每次开发都要去写一个axios
进行异步请求调用
每次都要写一个请求路径
我们选择用一个工具
根据接口文档自动生成api
GitHub - ferdikoomen/openapi-typescript-codegen: NodeJS library that generates Typescript or Javascript clients based on the OpenAPI specification
安装一下这个库
npm install openapi-typescript-codegen --save-dev
要想知道怎么用 我们得看文档
但是看不懂
我们在sublime里面操作
文本编译器
首先找一下接口文档的地址
修改语句
openapi --input http://localhost:8121/api/v2/api-docs --output ./generated --client axios
这里的接口和后端都是一一对应的
直接生成了向后端发起请求的函数
我们现在把这边和之前写的那个接口对应上
actions: {async getLoginUser({ commit, state }, payload) {//从远程获取登录信息const res = await UserControllerService.getLoginUserUsingGet();if (res.code === 0) {commit("updateUser", res.data);} else {commit("updateUser", {...state.loginUser,userRole: ACCESS_ENUM.NOT_LOGIN,});}},},修改
actions: {async getLoginUser({ commit, state }, payload) {//从远程获取登录信息const res = await UserControllerService.getLoginUserUsingGet();if (res.code === 0) {commit("updateUser", res.data);} else {commit("updateUser", {...state.loginUser,userRole: ACCESS_ENUM.NOT_LOGIN,});}},},看一下接口能否调通
把前端页面跑起来
傻鸟eslintrc 代码规范从我做起
module.exports = {root: true,env: {node: true,},extends: ["plugin:vue/vue3-essential","eslint:recommended","@vue/typescript/recommended","plugin:prettier/recommended",],parserOptions: {ecmaVersion: 2020,},rules: {"no-console": process.env.NODE_ENV === "production" ? "warn" : "off","no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",},
};
我们进入到前端网页
分析一下我们在脚手架中书写的代码
这边不知道为什么是404
改一下URL
成功
public static getLoginUserUsingGet(): CancelablePromise<BaseResponse_LoginUserVO_> {return __request(OpenAPI, {method: "GET",url: "/user/get/login",errors: {401: `Unauthorized`,403: `Forbidden`,404: `Not Found`}});}
如果想要自定义请求参数
修改使用代码生成器提供的全局参数修改对象
直接定义一个axios请求库的全局参数 比如说全局请求响应拦截器
响应拦截器允许你在收到响应之后对其进行处理或在错误发生时进行统一的错误处理。
interceptors
在前端开发中，使用 Axios 的全局请求和响应拦截器是非常常见的做法。这些拦截器可以帮助你在请求发出之前或响应返回之后统一处理请求和响应的逻辑，例如添加认证信息、处理错误、记录日志等。
定义一个plugins文件夹
放入一个axios.ts文件
官网 Interceptors | Axios Docs (axios-http.com)
向每一个响应都进行一个控制台打印信息
// Add a request interceptor
import axios from "axios";axios.interceptors.request.use(function (config) {// Do something before request is sentreturn config;},function (error) {// Do something with request errorreturn Promise.reject(error);}
);// Add a response interceptor
axios.interceptors.response.use(function (response) {console.log("响应", response);// Any status code that lie within the range of 2xx cause this function to trigger// Do something with response datareturn response;},function (error) {// Any status codes that falls outside the range of 2xx cause this function to trigger// Do something with response errorreturn Promise.reject(error);}
);
引入一下
控制台能够响应输出
