• 《Axios官方教程》

  • 价格:免费
  • 状态:全书已完结
  • 在读人数:24
  • 热度:1256
创建者
内容简介
Axios介绍
1、Axios是什么?
Axios是一个基于promise的HTTP库,类似于jQuery的ajax,用于http请求。可以应用于浏览器端和node.js,既可以用于客户端,也可以用于node.js编写的服务端。
2、Axios特性
(1)支持Promise API
(2)拦截请求与响应,比如:在请求前添加授权和响应前做一些事情。
(3)转换请求数据和响应数据,比如:进行请求加密或者响应数据加密。
(4)取消请求
(5)自动转换JSON数据
(6)客户端支持防御XSRF
3、浏览器支持情况

Firefox、Chrome、Safari、Opera、Edge、IE8以上

本文以通俗易懂的文字,力争让每一位想要学习Axios的童鞋都能轻松掌握该门技能

章节目录
  • 第一章 Axios基础
  • 1.1 Axios概念及安装
  • Axios 是什么? Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 特性 (1)支持
  • 1.2 Axios中Get请求
  • 本文以vue为例,介绍axios的基本用法。第一步.先用npm安装axios npm install axios --save第二步:引入axios import axios from "axios&q
  • 1.3 Axios中的Post请求
  • post请求常用的数据请求格式有两种: 1.form-data(常用于表单提交(图片上传、文件上传)) let data = {id: 12 }; let formData = new FormData(); for(let key in data){ formData.append(key,data[key]) } console.log(formData) axios.post(&#
  • 1.4 Put请求和Patch请求
  • put请求的主要用途:更新数据(所有数据推送到服务端)put请求用法:let data = { id: 12 }; axios.put("/User/UpdateUser", data).then(res=>{ console.log(res, 'put'
  • 1.5 Axios中的Delete请求
  • 方式一:params axios.delete("/data.json", { params: { id: 12}}).then(res => { console.log(res, "delete");}); let params = { id: 12
  • 1.6 并发请求
  • 并发请求,就是同时进行多个请求,并统一处理返回值。类似promise.all。在下面例子中,我们使用axios.all,对data.json/city.json同时进行请求,使用axios.spread,对返回的结果分别进行处理。代码如下: // 并发请求 axios.all([axios.get("/data.json&qu
  • 第二章 Axios实例
  • 2.1 Axios实例的创建
  • 1、axios实例的创建 比如:后端接口地址有多个(http://www.duidaima.com、http://www.example.com),并且超时时长不同(1000ms、2000ms),这个时候,我们可以创建实例。思路如下:创建多个实例,配置不同的超时时长,用不同的实例去请求不同的
  • 2.2 Axios实例的相关配置
  • (1)配置列表 baseURL:请求的域名(基本地址)。 timeout:请求的超时时长,超出后后端返回401。 备注:一般由后端定义,后端的接口需要的处理时长较长的时候,如果请求的时间过长,后端处理不过来,就会阻塞,给服务器造成较大的压力。设置后,可以及时释放掉。 url:请求路径。 method:请求方法。如:get、po
  • 2.3 常用参数配置的使用方法
  • 举例1: let instance1 = axios.create({ baseURL:'http://localhost:9090',timeout:1000})instance1.get("/contactList",{ params:{ id:10}}).then(re
  • 第三章 Axios拦截器、错误处理与取消请求
  • 3.1 拦截器
  • 1、拦截器 什么是拦截器? 在请求前或响应被处理前拦截他们,分为两种:请求拦截器与响应拦截器。拦截器的使用方法 请求拦截器 // 请求拦截器 axios.interceptors.request.use(config => { // 在发送请求前做些什么return con
  • 3.2 错误处理,拦截
  • 结合请求拦截器与响应拦截器来说,不管是请求错误还是响应错误,都会执行catch方法。 // 请求拦截器axios.interceptors.request.use(config => { // 在发送请求前做些什么return config;},err =&gt
  • 3.3 取消请求(不常用)
  • let source = axios.CancelToken.source(); axios.get("/data.json", { cancelToken: source.token}
  • 第四章 Axios请求的封装与使用
  • 思路分析 axios 请求的封装,无非是为了方便代码管理,我们可以使用抽离拆分的思想,将不同功能模块的接口处理成不同的模块,然后封装一个方法,专门用于数据交互。第一步:新建 src/service/contactApi.js 文件const CONTACT_API = { // 获取联系人列表 getContactList:{
  • 4.1思路分析
  • 思路分析 axios 请求的封装,无非是为了方便代码管理,我们可以使用抽离拆分的思想,将不同功能模块的接口处理成不同的模块,然后封装一个方法,专门用于数据交互。第一步:新建 src/service/contactApi.js 文件 const
  • 4.2 设置请求拦截器与响应拦截器
  • 设置请求拦截器与响应拦截器 拦截器的添加 请求拦截器 instance.interceptors.request.use(config => { // 发起请求前做些什么Toast.loading({ mask: false,duration: 0, // 一直存在forbidClick: true, // 禁止点
  • 4.3 总结
  • 在进行项目开发的时候,我们需要对网络请求的方法进行封装,可以有效地减少后期代码维护的难度,建议开发者根据不同的功能模块进行拆分,方便后期代码问题的定位。另外,也能实现代码的低耦合,避免出现更多的重复代码。
  • 第五章 Axios API
  • 5.1 Axios API
  • 可以向 axios 传递相关配置来创建请求 axios(config) 发起一个post请求 axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintst
  • 5.2 Axios 实例
  • 创建一个实例 您可以使用自定义配置新建一个实例。 axios.create([config]) const instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'} })
  • 5.3 请求配置
  • 这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method,请求将默认使用 GET 方法。 {// `url` 是用于请求的服务器 URLurl: '/user',// `method` 是创建请求时使用的方法method: 'get', // 默认值// `baseURL` 将自动加在 `url` 前
  • 5.4 响应结构
  • 一个请求的响应包含以下信息。 {// `data` 由服务器提供的响应data: {},// `status` 来自服务器响应的 HTTP 状态码status: 200,// `statusText` 来自服务器响应的
  • 5.5 默认配置
  • 您可以指定默认配置,它将作用于每个请求。 全局 axios 默认值 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common
  • 5.6 拦截器
  • 在请求或响应被 then 或 catch 处理前拦截它们。 添加请求拦截器 axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function
  • 5.7 错误处理
  • axios.get('/user/12345').catch(function (error) {if (error.response) {// 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围console.log(error.response.data);console.log(error.r
  • 5.8 取消请求
  • AbortController 从 v0.22.0 开始,Axios 支持以 fetch API 方式—— AbortController 取消请求: const controller = new AbortController();axios.get('/foo/bar', {signal: controller
  • 5.9 请求体编码
  • 默认情况下,axios将 JavaScript 对象序列化为 JSON 。 要以application/x-www-form-urlencoded格式发送数据,您可以使用以下选项之一。浏览器 在浏览器中,可以使用URLS
  • 5.10 注意事项
  • 语义化 在axios达到 1.0 版本之前,破坏性更改将以新的次要版本发布。 例如 0.5.1 和 0.5.4 将具有相同的 API,但 0.6.0 将具有重大变化。Promises axios 依赖原生的ES6 Promise实现而被支持。 如果你的环境不支持
读者评论
  • 你还没登录,点击这里
  • 本书评论
最近这些人在读这本书