1.axios的知识点理解，HTTP，报文请求方式，状态码，API，postman

已于 2022-04-05 16:58:01 修改
阅读量570 收藏 1
点赞数
分类专栏： ajax\promise\axios 文章标签： http java html5
于 2021-10-09 12:41:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lazylYYY/article/details/120655035
版权

目录

一：准备1：HTTP相关

1.HTTP请求基本过程

2.HTTP请求报文

3.HTTP响应报文

4.常见的响应状态码

5.请求方式

6.请求参数

7.请求方式与请求参数特别注意

二：准备2：API分类相关

1.API分类

2.使用json-server搭建REST API

7.我们可以修改先退出ctrl+c，修改后保存需要重新回到cmd重新运行     json-server 08.json

8.使用postman测试接口

10.更改：

 11.一般http请求与ajax请求的区别

一：准备1：HTTP相关

1.HTTP请求基本过程

①浏览器端向服务器发送HTTP请求(请求报文)

②后台服务器接收到请求后，处理请求, 向浏览器端返回HTTP响应(响应报文)

③浏览器端接收到响应, 解析显示响应体或调用回调函数

2.HTTP请求报文

①请求行：

②请求头（一般有多个）

③请求体

3.HTTP响应报文

①响应行

②响应头（一般有多个）

 ③响应体

4.常见的响应状态码

1xx  服务器收到请求

2xx 请求成功 200成功

3xx 重定向，301永久重定向（接口返回一个location，浏览器自动跳转）

                     302临时重定向（接口返回一个location，浏览器自动跳转）

                     304资源未被修改（刚请求过又请求了，不再执行新请求，直接去缓存找数据）

4xx 客户端错误 404资源未找到 403没有权限（没登陆就想获取用户信息）

5xx 服务端错误 500服务器错误 504网关超时

5.请求方式

  • GET(索取): 从服务器端读取数据 ----- 查(R)
  • POST(交差): 向服务器端添加新数据 ------ 增(C)
  • PUT: 更新服务器端已存在的数据 ------- 改(U)
  • DELETE: 删除服务器端数据 ---------删(D)

6.请求参数

①query参数（查询字符串参数）

  • 参数包含在请求地址中，格式为:/xxxx?name=tom&age=18
  • 敏感数据不要用query参数，因为参数是地址的一部分，比较危险。
  • 备注：query参数又称查询字符串参数，编码方式为urlencoded

②params参数

  • 参数包含在请求地址中，格式如：http://localhost:3000/add_person /tom/18
  • 敏感数据不要用params参数，因为参数是地址的一部分，比较危险。

③请求体参数

  • 参数包含在请求体中，可通过浏览器开发工具查看
  • 常用的两种格式：

格式一：urlencoded格式

               例如：name=tom&age=18

               对应请求头：Content-Type: application/x-www-form-urlencoded

格式二：json格式

               例如: {"name": "tom", "age": 12}

               对应请求头：Content-Type: application/json 

7.请求方式与请求参数特别注意

  1. GET请求不能携带请求体参数，因为GET请求没有请求体。
  2. 理论上一次请求可以随意使用上述3种类型参数中的任何一种，甚至一次请求的3个参数可以用3种形式携带，但一般不这样做。
  3. 一般来说我们有一些“约定俗成”的规矩：
    (1) 例如form表单发送post请求时: 自动使用请求体参数，用urlencoded编码。

   (2) 例如jQuery发送ajax-post请求时：自动使用请求体参数，用urlencoded编码。

     4.开发中请求到底发给谁？用什么请求方式？携带什么参数？----要参考项目的API接口文档。

二：准备2：API分类相关

1.API分类

传统API设计：把每个url当作一个功能

Restful API设计：把每个url当做一个唯一的资源 

不使用url参数 传统API设计 : /api/list?pageIndex=2

                       Restful API设计 ：/api/list/2

  • REST API ( restful风格的API  )

                      ①同一个请求路径可以进行多个操作

                      ②请求方式会用到GET/POST/PUT/DELETE

                      ③发送请求进行CRUD哪个操作由请求方式来决定

  • 非REST API ( restless风格的API )

                      ①请求方式不决定请求的CRUD操作

                      ②一个请求路径只对应一个操作

                      ③一般只有GET/POST

2.使用json-server搭建REST API

①json-server是什么?   ——————用来快速搭建REST API的工具包

3.在线文档: https://github.com/typicode/json-server

4.在cmd里面全局安装        npm i json-server -g

5.在命令行进入某个盘然后创建  json-server 08.json 

6.里面默认生成的数据是

7.我们可以修改先退出ctrl+c，修改后保存需要重新回到cmd重新运行     json-server 08.json

8.使用postman测试接口

9.如果需要保存 ctrl+s

10.更改：

 

 11.一般http请求与ajax请求的区别

①ajax请求是一种特别的http请求

②对服务器端来说, 没有任何区别, 区别在浏览器端

③浏览器端发请求: 只有XHR或fetch发出的才是ajax请求, 其它所有的都是非ajax请求

④浏览器端接收到响应

  • 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的自动刷新/跳转页面
  • ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

 

常见请求头：

此链接

http缓存

什么是缓存 一些静态资源(js.css.img)

http缓存策略（强制缓存+协商缓存）

强缓存：浏览器初次向服务器发起请求，服务器返回数据并且判断如果数据可以被缓存就加上Cache-Control,如果不适合就不加，此时浏览器再次访问就可以在本地中获取数据

Cache-Control的值：

max-age最大缓存时间    private  public 

no-cache不用b本地强缓存直接交给服务端处理  no-store不用本地缓存也不用服务端缓存     

刷新操作方式，对缓存的影响

协商缓存   是服务器端缓存策略 服务器判断客户资源是否和服务端资源一致，一致就返回304，否则返回200和最新资源

浏览器初次请求     服务端返回资源和资源标识，

浏览器再次请求带着资源标识请求    服务端根据资源标识与自身是否相等 相等返回304 否则返回200和新的资源标识

资源标识：在Response Headers中，有两种

  • Last-Modified 资源的最后修改时间
  • Etag资源的唯一标识（一个字符串，类似人的指纹）

 

Axios post请求
WRSR52的博客
12-02 1万+
1.常见post请求种类 1.form表单提交 method="post" 是同步的,(要素:页面是否刷新) 2.axios.post() 异步操作 1.1axios post请求入门案例 1.1.1编辑前端JS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Axios测试</title> </head> <bo...
axios的简单封装和http请求实践
weixin_33757609的博客
01-11 203
对axios做一个简单的封装和实现的思路，主要实现： 统一捕获接口报错（拦截器） 基础验证 （auth） import axios from 'axios' // 最基本的全局配置 const instance = axios.create({ baseURL: "https://movie.douban.com/j/", timeout: 2500 }) 复制代码// Ad...
Axios：轻松进行 HTTP 请求的强大工具
最新发布
上进！努力！！！
08-23 426
Axios 是一个基于 Promise 的 HTTP 客户端，可以运行在浏览器和 Node.js 中。支持 Promise：使用异步请求时可以使用。拦截请求和响应：可以在请求发送前或响应到达后进行处理。取消请求：支持通过取消请求。自动转换 JSON 数据：请求和响应中的 JSON 数据会自动转换为 JavaScript 对象。客户端支持防御 XSRF：有助于保护应用免受跨站请求伪造（XSRF）的攻击。
axios请求接口http_axios的简单封装和http请求实践
weixin_39655049的博客
12-22 286
对axios做一个简单的封装和实现的思路，主要实现：统一捕获接口报错(拦截器)基础验证 (auth)import axios from 'axios'// 最基本的全局配置const instance = axios.create({baseURL: "https://movie.douban.com/j/",timeout: 2500})// Add a request interceptor，...
vue中http,axios请求
weixin_42727360的博客
07-10 382
vue是一个纯前端的框架，需要webapi支持数据。通过http请求webapi就行了。我们既可以用jquery ajax请求，也可以使用axios请求，我们项目中选择了后者。axios里有个拦截器挺好的，它可以在请求发送前，添加请求头及一些工作。 const requestInterceptor=axios.interceptors.request.use( config => { ...
解决axios发送post请求返回400状态码的问题
10-18
首先，400状态码（Bad Request）是HTTP协议中的一个状态码，它表示客户端发送的请求存在语法错误或无法被服务器理解。在本文中，这个问题出现在前端使用axios库发送POST请求到后端时。 axios库是一个基于Promise的...
axios-0.21.1.zip
07-15
以下是关于Axios 0.21.1的一些关键知识点： 1. **Promise支持**：Axios的核心在于其全面使用Promise API，这使得处理异步操作变得简单且易于理解，尤其对于链式调用的支持，使得错误处理和请求拦截更加直观。 2. *...
axios 处理 302 状态码的解决方法
08-27
axios 处理 302 状态码的解决方法 在本文中，我们将介绍 axios 处理 302 状态码的解决方法。这是一种常见的问题，当浏览器打开一个单页面应用（SPA）时， token（或者 session）过期了，导致后端返回 302 状态码...
基于小程序请求接口wx.request封装的类axios请求
10-15
通过这样的封装，小程序的网络请求不仅保持了与`axios`类似的API风格，还能利用小程序自身的特性，如缓存和本地存储，实现更高效的网络通信。 总结来说，基于小程序的`wx.request`封装类axios请求是一种优化网络...
axios post请求
热门推荐
sjpeter的专栏
06-06 7万+
有关axios post参数的传值问题 let data = {} axios({ url: '连接地址 path参数直接放里面', method: 'post 默认是 get', params: '必须是一个无格式对象 query参数', data: '是作为请求主体被发送的数据 body参数', timeout: 1000, headers...
axios,错误状态码处理
grow_的博客
09-14 1359
axios错误
二次封装axios，拦截器
zyf13671493506的博客
10-29 513
作为前端开发者，每个项目基本都需要和后台交互，目前比较流行的ajax库就是axios了，当然也有同学选择request插件，这个萝卜白菜，各有所爱了。目前虽然axios有config、interceptor和各个请求方式，但是针对一个大型的项目，我们还是需要做二次封装才能快速提升开发效率！ 今天我们针对axios库做二次封装，看看是否有简化我们的开发工作。 封装interceptor interceptor作用就是拦截，可以针对请求参数和响应结果进行拦截处理，一般在项目当中，我们主要会针对接口常规报错
axios post
qq_43542074的博客
09-04 231
示例： commit() { let commitData = { key: "1", confPro: this.confPro, confName: this.confName, content: this.content, fileIds:this.fileIds, remarks: ...
axios请求返回状态码处理和跨域请求时允许保存cookie
qq_37734787的博客
06-21 458
// 返回指定范围状态码 axios.defaults.validateStatus = function (status) { return status >= 200 && status <= 500; // 默认的 }; // 跨域请求，允许保存cookie axios.defaults.withCredentials = true;
axios的post请求
zjsfdx的博客
07-14 1122
需求： 要获取用户离开当前页面时的音乐播放时长，然后post给后台 /* 数据序列化 */ function transformRequest(data){ var ret = ''; for(var it in data){ ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it])...
axios入门——常用五种请求方法介绍（get、post、put、patch、delete）
艾丽的博客
01-18 2万+
写在前面 axios中文说明 为方便起见，axios为所有支持的请求方法提供了别名 params 是将与请求一起发送的 URL 参数，对应后台中的query data 是作为请求主体被发送的数据，对应后台中的body axios.request(config) axios.get(url[, config]) // 只支持 params 传参 axios.delete(url[, config]) // 只支持 params传参 axios.head(url[, config]) // 只支持 para
axios-post请求
kgcwuli的博客
07-08 323
第一步：安装：npm install qs --save-dev 第二步： import axios from "axios"; import qs from "qs"; export const getData = (params)=>{ return axios .post("/api/getImages",qs.stringify(params)) .then((res)=&...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值