1 Star 0 Fork 0

kjinan/use-axios-in-vue

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

use-axios-in-vue

本项目包含axios的基本数据请求,实例配置讲解以及在项目中的应用封装。

Axios

  • Axios是一个基于Promise的HTTP库。类似于Ajax, 用于HTTP请求
  • 可以用于浏览器和node.js。既可以用于客户端,也可以用于服务端。
  • 支持promise API
  • 拦截请求和响应。可以在请求或响应前做一些操作。比如在请求前,给请求头加一些授权信息等。
  • 转换请求数据和响应数据。例如在请求时,一些敏感信息需要加密,接收时需要解密。
  • 取消请求。
  • 自动转换JSON数据。HTTP请求过程中,一般传输的都是字符串,需要json.parse来进行转换。Axios会自动进行转换。
  • 客户端支持防御XSRF攻击。

Axios 兼容 ie8+

项目介绍

  • Axios基础用法(get, post, put等)
  • Axios 进阶用法(实例, 配置,拦截器,取消请求等)
  • Axios进一步封装,在项目中的实际应用

Axios请求方法及别名(get方法)

  • get 获取数据
  • post 提交数据

数据格式1: form-data表单提交: 图片+文件上传;

数据格式2: application/json

Request HeadersContent-Type: multipart/form-data; boundary=----WebKitFormBoundaryO24RQrpc59b2ZIe3 boundary 相当于把传输的数据编码了

  • put 更新数据(所有数据 推送到后端)
  • patch 更新数据(只将修改的数据推送到后端)
  • delete 删除数据

并发请求

同时进行多个请求,并统一处理返回值

  • axios.all() 参数是多个axio请求组成的数组
  • axios.spread() 对多个请求完成后的返回数据进行分割处理,参数是回调函数,回调函数的参数对应多个请求的返回值

创建axios实例

后端接口有多个地址,超时时长不同。可以在实例中配置这些参数,用实例去请求。 超时时长 发起HTTP请求时,如果服务端长时间没有返回数据,接口就会报超时。一般由后端进行定义。

    1. axios全局配置
//1.全局配置
axios.defaults.timeout = 1000;
    1. axios实例配置
//2.实例配置
let instance = axios.create();
instance.defaults.timeout = 3000;
    1. axios请求配置
let instance = axios.create({
    baseURL: 'http://localhost:8080'
});
//3.axios请求配置
instance.get('/public/test.json', {
timeout: 5000
}).then(res => {
    console.log(res);
});

优先级: 全局配置<实例配置<请求配置

拦截器

在请求或响应被处理前拦截。 请求拦截器 响应拦截器 取消拦截器 请求错误和响应错误的区别

错误处理

//感觉教程里下面教程的描述是错的,因为我在404错误时,是被response捕获的
请求错误指发送请求没有到达后端,浏览器就会报错,一般以4开头,例如401 超时, 404 not found;
响应错误指到达后端,服务器返回错误信息,一般以5开头,例如500系统错误

取消请求

取消正在进行的http请求。 crm管理系统,新建,编辑,查询 数据量大 3-5s,可能会需要取消请求

axios 实战

  1. 安装vue组件库
  2. 安装后端请求接口服务
  3. 页面搭建

使用vue组件库vant, 是一个移动端的组件库.

封装拓展

  1. 可以给请求添加统一的loading
  2. 在header添加token鉴权
  3. 添加同意的错误处理(比如登录超时等)

空文件

简介

取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/ycylg/use-axios-in-vue.git
git@gitee.com:ycylg/use-axios-in-vue.git
ycylg
use-axios-in-vue
use-axios-in-vue
master

搜索帮助