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

简介: 学习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
目录
相关文章
|
3月前
|
资源调度 JavaScript 前端开发
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
这篇文章是关于如何在Vue项目中使用axios进行网络请求、二次封装axios以及使用mockjs模拟响应数据的教程。
105 1
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
|
4月前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
52 1
|
2月前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
|
2月前
|
存储 JSON 安全
商品详情(item getAPI接口)json数据格式参考
某东商品详情(item get API接口)的JSON数据格式参考如下
|
2月前
|
JSON API 数据格式
商品详情(item getAPI接口)json数据格式参考
淘宝商品详情(item get API接口)返回的JSON数据格式是一个复杂且灵活的结构,包含多个字段和对象。以下是一个简化的JSON数据格式参考:
|
4月前
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口,请求会发送两次
vue中使用axios请求post接口,请求会发送两次
|
2月前
|
JSON API 数据格式
店铺所有商品列表接口json数据格式示例(API接口)
当然,以下是一个示例的JSON数据格式,用于表示一个店铺所有商品列表的API接口响应
|
3月前
|
JSON 数据格式
用来返回Json数据格式的工具--通用类
用来返回Json数据格式的工具--通用类
22 1
|
3月前
|
JSON JavaScript API
(API接口系列)商品详情数据封装接口json数据格式分析
在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦!
|
4月前
|
JSON Java fastjson
java小工具util系列3:JSON和实体类转换工具
java小工具util系列3:JSON和实体类转换工具
43 2