axios

伤心猪大肠
308 阅读4分钟

axios

简述

  1. 是什么
- 前端最流行的ajax请求库
- react/vue官方都推荐使用axios发ajax请求
  1. 特点
- 基本promise的异步ajax请求库
- 浏览器端/node端都可以使用
- 支持请求/响应拦截器
- 支持请求取消
- 请求/响应数据转换
- 批量发送多个请求

请求方式

- GET 请求指定的页面信息，并返回实体主体
- POST 向指定资源提交数据进行处理请求(如提交表单或者上传文件)，数据被包含在请求体中，POST请求可能会导致新的资源的建立和或已有资源的修改
- PUT 从客户端向服务器传送的数据取代指定的文档的内容
- DELETE 请求服务器删除指定的页面
- CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
- OPTIONS 允许客户端查看服务器的性能
- TRACE 回显服务器收到的请求，主要用于测试或诊断
- HEAD 类似get请求，不过返回的响应中没有具体的内容，用于获取报头

请求参数

  1. query参数
- 该参数包含在请求地址中，格式为：/xx?name=tom&age=18
- 敏感数据不要使用该参数，因为参数是地址的一部分，比较危险
- 该参数又称为查询字符串，编码格式为urlencoded
  1. params参数
- 该参数包含在请求地址中，格式为：xx/tom/18
- 敏感数据不要使用该参数，因为参数是地址的一部分，比较危险
  1. 请求体参数
- 该参数包含在请求体中，可以通过浏览器开发工具或抓包工具查看
- 该参数的格式有3种
1.urlencoded格式
如：name=tom&age=18
对应请求头：Content-Type:application/x-www-form-urlencoded
2.json格式
如：{"name":"tom","age":18}
对应请求头：Content-Type:application/json
3.form-date格式(用于文件上传请求)
对应请求头：Content-Type:multipart/from-data

请求参数与方式的对应关系

  1. GET请求的参数只可以为query参数和params参数
  2. POST请求的参数可以为任意，但是一般只用请求体参数
  3. 其他的请求方式的参数也是可以为任意，但是一般只用请求体参数

API的分类

  1. API是什么
请求方式、请求地址以及请求参数一起构成了API
  1. 分类
  • REST API: restful
- 发送请求进行CRUD哪个操作有请求方式决定
- 同一个请求路径可以进行多个操作
- 请求方式一般为GET/POST/PUT/DELETE
  • 非REST API: restless
- 请求方式不决定请求的CRUD操作
- 一个请求路径只对应一个操作
- 一般只有GET/POST

XHR的API

  1. XMLHttpRequest():创建xhr对象的构造函数
  2. status:响应状态码值：如200，404
  3. statusText：响应状态文本
  4. readyState：标识请求状态的只读属性
- 0:初始
- 1:open()之后，send()之前
- 2:send()之后
- 3:请求中
- 4:请求完成
  1. onreadystatechange:绑定readyState改变的监听
  2. responseType:指定响应数据类型，如果是'json',得到响应后自动解析响应体数据
  3. response:响应体数据，类型取决于responseType的指定
  4. timeout:指定请求超时时间，默认0代表为没有限制
  5. ontimeout:绑定超时的监听
  6. onerror:绑定请求网络错误的监听
  7. open():初始化一个请求，参数为:(method,url[,async])
  8. send(data):发送请求
  9. abort():请求终断
  10. getResponseHeader(name):获取指定名称的响应头值
  11. getAllResponseHeaders():获取所有响应头组成的字符串
  12. setRequestHeader(name,value):设置请求头

axios用法

  1. 完整
- axios(obj),返回一个promise对象
- obj
{
    method:'请求方式',
    url:'请求路径'
    // 请求参数
    params:{},//携带的query参数
    data: {},//携带的请求体参数
    // 如果是params参数则手动在url上面写
}
  1. 简写
- axios.get('请求路径',obj),返回一个promise对象
- obj请求参数，{
    params:{},//携带的query参数
}
{},//请求体参数
// 如果是params参数则手动在url上面写
  1. axios.defaults.baseURL = "默认的api";
axios.defaults.baseURL = "http://49.232.47.192:9527/api";
axios.get("/goodList", { params: { page: 1 } })
  1. axios.create(obj)
- 根据指定配置创建一个新的axios，也就是每个新的axios都有自己的配置
- 新axios只是没有取消和批量发送请求的方法，其他所有语法都是一致的
- 例子
const instance = axios.create({
  baseURL: "http://49.232.47.192:9527/api",
}) //返回一个配置好的新的axios对象
instance({
    method: "GET",
    url: "/goodList",
    params: {
      page: 1,
    },
}) // 返回一个promise对象
  1. 拦截器
- 请求拦截器，在请求还没发出去之前，第一步把请求拦截，第二步根据具体业务逻辑，决定是否放行
axios.interceptors.request.use(
  (config) => {
    // 操作代码
    return config; //返回值作为请求的返回值
  },
  (error) => {}
);
.....此处跟上普通的axios请求.....
- 响应拦截器，在响应数据回来的时候，对其进行一步拦截检查操作
axios.interceptors.response.use(
  (response) => {
    // 操作代码
    return response;//返回值作为请求的返回值
  },
  (error) => {}
);
.....此处跟上普通的axios请求.....
  1. 取消请求
const { CancelToken } = axios;
axios({
  method: "GET",
  url: "http://49.232.47.192:9527/api/goodList",
  params: {
    page: 1,
  },
  CancelToken: new CancelToken((c) => {
    this.cancel = c;
  }),
}).then(
  (value) => {},
  (reason) => {}
);
this.cancel() //取消请求
avatar
文章
阅读
粉丝