学习axios必知必会（1）~axios基本介绍、axios配置、json-server接口模拟工具

2021-09-27 22:56:12

一、axios基本介绍

1、axios（前端最流行的 ajax 请求库）特点：

① 基于 xhr + promise 的异步 ajax 请求库

② 浏览器端/node 端都可以使用

③ 支持请求／响应拦截器

④ 支持请求取消

⑤ 请求/响应数据转换

⑥ 批量发送多个请求

2、axios常用的语法：

★ axios(config): 通用/最本质的发任意类型请求的方法

axios(url[, config]): 可以只指定 url 发 get 请求

axios.request(config): 等同于 axios(config）

★ axios.create([config]): 创建一个新的 axios

★ axios.defaults.xxx: 请求的默认全局配置

axios.interceptors.request.use(): 添加请求拦截器

axios.interceptors.response.use(): 添加响应拦截器

二、axios的配置介绍（重点属性：url、baseURL、params、headers、 data、timeout、proxy）

1、常用的默认配置的是：baseURL、method、timeout

① baseURL：设置url的基本结构（请求根地址），域名和协议，再结合属性url某个请求路径，axios会自动将baseURL 和 url 进行拼接，从而得出正确的请求路径。

② method：请求方式 get/post

③ timeout：延时时间（超过多少时间就取消请求）【单位是毫秒】

2、介绍其他配置属性：

① params：请求体/请求参数/查询的对象(当请求方式是get)

② transformRequest、transformResponse 对请求结果进行预处理、对响应结果进行预处理

③ headers：请求头（在身份验证时，可以在头信息加入一个标识）

④ data：请求体(当请求方式是post), 数据形式有json对象和字符串形式

⑤ responseType：响应的数据格式json/text/document/stream等

⑥ withCredentials：跨域亲戚是否携带cookies

⑦ auth：请求基础验证（验证用户名和密码）

⑧ adapter：自定义请求处理

⑨ xsrfCookieName和xsrfHeaderName 设置cookie的名字，设置头信息名字（安全设置，保证请求来自自己的客户端，避免跨站(域)攻击

【标识保护作用---标识：返回请求的返回结果带有服务端的sessionID，保护：某些网站会通过超链接向在哪服务器发送请求，由于没有拿到服务器的sessionID，请求失败】

⑩ socketPath：设置socket文件位置，向docker的守护进行发送请求，与代理proxy有优先级关系，两者同时设定，优先选socket

⑪ httpAgent、httpsAgent 设置客户端信息

⑫ proxy 代理：axios的代理是在服务端node.js 中【代理作用：抓取数据（爬虫），

使用一个ip向某个目标服务器发送请求以抓取数据时，可能会被禁掉ip------解决：借助多个中间代理进行切换，发送请求从而获取到目标服务器的数据】

⑬ cancelToken：取消请求

三、json-server（接口模拟工具）

1、josn-server：适合前端接口测试，为前端开发人员可以提供一个`高仿真的RESTFul后台服务`（数据原型），基于Rest API，运行在nodejs环境，用来模拟http协议的服务端.

2、关于json-server更多细节可以参考github：https://github.com/typicode/json-server

3、准备工作：使用前安装node.js 应用程序（安装node文章）

4、简单使用json-server：

//(1)先进入某个文件夹项目下,编译器终端安装json-server依赖命令（-g 是全局安装）：

npm install -g json-server

//（2）创建一个名为db.json的文件，然后文件内容为：

{

  "posts": [

    { "id": 1, "title": "json-server", "author": "typicode" }

  ],

  "comments": [

    { "id": 1, "body": "some comment", "postId": 1 }

  ],

  "profile": { "name": "typicode" }

}

//(3)启动json-server服务（例如在浏览器访问：http://localhost:3000/posts/1）

json-server --watch db.json

5、json-server还提供了更多的路由：

GET    /posts

GET    /posts/1

POST   /posts

PUT    /posts/1

PATCH  /posts/1

DELETE /posts/1

码农公寓