【九月打卡】第14天 Vue3 + TS 仿知乎专栏企业级项目

课程名称：2022全面升级. Vue3 + TS 仿知乎专栏企业级项目

课程章节： 7-3 使用 swagger在线文档查看接口详情，7-4 axios 的基本用法和独家后端API 使用（必看），7-5 后端Icode终极使用方案

主讲老师：张轩

课程内容：

了解后端生成的swagger文档

课程收获：

由于前后端分离，前端或者后端无法做到及时协商，最终导致问题爆发，所以程序猿写代码时都是很暴躁的。

这个时候，就可以用到Swagger了，它号称世界上最流行的API框架，Restful Api文档在线自动生成器。还可以在线测试API接口，不必特意去下载Postman，ApiPost去测试接口。还支持多种语言,如：Java，PHP(PHP是世界上最好的语言！)等

接口文档需要包括的点

1.endpoints:具体路径

2.使用什么样的method？

3.发送请求的具体参数

4.请求返回数据的格式

axios是当今前端最流行的请求接口的一个工具，Axios，可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点：

1.在浏览器中创建XMLHttpRequest请求

2.在node.js中发送http请求

3.支持Promise API

4.拦截请求和响应

5.转换请求和响应数据

6.取消要求

7.自动转换JSON数据

8.客户端支持防止CSRF/XSRF(跨域请求伪造)

慕课网提供的 Icode 经过几次升级，现在把最终的解决方案整理如下，供同学们参考。

可以在 main.ts 中的拦截器里面一劳永逸的添加。

慕课网提供的 Icode 经过几次升级，现在把最终的解决方案整理如下，供同学们参考。

可以在 main.ts 中的拦截器里面一劳永逸的添加。

// 替换 baseURL

axios.defaults.baseURL = 'http://apis.imooc.com/api/'

// 下面的 icode 值是从慕课网获取的 token 值，可以在课程右侧的项目接口校验码找到

axios.interceptors.request.use(config => {

... 其他代码

// get 请求，添加到 url 中

config.params = { ...config.params, icode: '******' }

// 其他请求，添加到 body 中

// 如果是上传文件，添加到 FormData 中

if (config.data instanceof FormData) {

config.data.append('icode', '******')

} else {

// 普通的 body 对象，添加到 data 中

config.data = { ...config.data, icode: '******' }

}

return config

})