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

一、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

你可能感兴趣的:(web应用,json,javascript,json-server,axios配置,axios)