学习axios必知必会(1)~axios基本介绍、axios配置、json-server接口模拟工具_axios httpagent-程序员宅基地

技术标签: 计算机基础知识  axios配置  json  axios  javascript  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

❀ 如果本篇博客对您有一定的帮助,大家记得留言+点赞+收藏哦,ღ( ´・ᴗ・` )比心。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45630258/article/details/122648599

智能推荐

JavaScript在服务端(Node.js)和客户端的区别_我在本地电脑用js写了一个服务器,他和购买的服务器有什么区别?-程序员宅基地

文章浏览阅读7.1k次,点赞11次,收藏31次。JavaScript是一种脚本语言,一般运行在客户端,而Node.js可以使JavaScript运行在服务端。JavaScript包含三部分:ECMAScript、DOM、BOM三部分。ECMAScript是JavaScript的核心语法DOM是HTML和XML的应用程序接口(API),用于控制文档的内容与结构BOM(浏览器对象模型)可以对浏览器窗口进行访问和操作区别:在客户端,Ja..._我在本地电脑用js写了一个服务器,他和购买的服务器有什么区别?

JS Ireratop迭代器/遍历器_jsir-程序员宅基地

文章浏览阅读418次。JS Iterator迭代器/遍历器_jsir

vue封装echarts数据更新页面数据不渲染问题_vue向echarts组件传值后渲染init 不渲染-程序员宅基地

文章浏览阅读2.2k次。## 解决方案,在子组件监听optionexport default { name: 'CommonEcharts', props: ['option'], data() { return { } }, watch: { option: { handler(newval, oldval) { let chartDom = document.getElementById('main'); let myChart = echarts.init_vue向echarts组件传值后渲染init 不渲染

ADB命令大全_adb点击命令-程序员宅基地

文章浏览阅读9k次,点赞6次,收藏48次。ADB命令大全_adb点击命令

android服务启动失败Unable to start service Intent U=0: not found-程序员宅基地

文章浏览阅读8.5k次,点赞4次,收藏11次。android启动服务失败,提示:Unable to start service Intent { cmp=xxx/.xxx} U=0: not found_unable to start service intent

Windows上安装Redis教程_windows安装redis-程序员宅基地

文章浏览阅读1.8w次,点赞43次,收藏148次。在 Windows 上安装 Redis5.0 教程_windows安装redis

随便推点

ASP 3.0高级编程(十五)-程序员宅基地

文章浏览阅读60次。 来 源: 互联网 作 者: 不祥 发表日期: 2005-12-17 16:47:22 阅读次数: 76 文章标题:ASP → ASP 3.0高级编程(十五) 查看权限: 普通文章 查看方式: 查看:[ 大字 中字 小字 ] [双击滚屏] 正 文: ASP 3..._asp高级编程(15)

1. Helm Template 3分钟将项目部署至k8s_helm tpl-程序员宅基地

文章浏览阅读354次。k8s部署写yaml很烦人?helm template 3分钟帮你把项目打包成Helm Chart并部署至k8s_helm tpl

IOC和AOP概述_aoc iop-程序员宅基地

文章浏览阅读355次。DI(依赖注入):容器知道哪个组件(类)运行的时候,需要注入另一个组件(类);容器通过反射的形式,将容器中准备好的对象注入(利用反射给对象赋值)。只要是容器管理的组件,都能使用容器提供的强大功能。..._aoc iop

Hr自主项目推行笔记-程序员宅基地

文章浏览阅读61次。 已经很久没上iteye博客了,虽然在公司里面用不了,但是至少回家的时候可以用来做总结,比较过几个专业网站的博客,最终还是觉得这里的最适合自己,主要是因为有做电子书的功能。这样后面方便日志的备份。以后要养成每天写日志做总结的习惯了,这里是开始的舞台, 在这里开始记录我冲刺的一年-2012。 今年接了一个私活,是关于以人资管理为核心的小型erp系统。由于领导和我们开发人员都没有独立在外面..._推行笔记

C语言中字符串和字符数组的区别_c语言字符数组和字符串的区别-程序员宅基地

文章浏览阅读3k次,点赞7次,收藏29次。(1)C语言中,没有字符串类型但可以用字符数组模拟字符串。(2)C语言中,字符串是以’\0’作结尾字符。(3)C语言中,字符串常量本质上是一个无名的字符数组_c语言字符数组和字符串的区别

爬取网易云数据并且可视化展示_网易云爬虫数据可视化-程序员宅基地

文章浏览阅读1.8w次,点赞67次,收藏397次。结构化爬取网易云数据并且可视化展示项目说明代码框架第三方库说明内容爬取说明完整代码爬取结果内容可视化项目说明网易云音乐歌单数据获取,获取某一歌曲风格的所有歌单,进入每个歌单获取歌单名称、创建者、播放量、页面链接、收藏数、转发数、评论数、标签、介绍、收录歌曲数、部分收录歌名,并统计播放量前十的歌单,将播放量前十的歌单以及对应的所有信息进行另外存储,对其进行可视化展示。代码框架第三方库说明# bs4'''BS4全称是Beautiful Soup,它提供一些简单的、python式的函数_网易云爬虫数据可视化

推荐文章

热门文章

相关标签