Vue axios使用

Vue axios请求

Vue axios 提供了七种请求的方式，分别为 REQUEST、 GET、HEAD、DELETE、POST、PUT、PATCH。使用 Vue 的 axios 发送 HTTP 请求的 API，是可以支持 Promise 的。

Vue axios请求详解

语法

axios.reqmethod(url).then((data)=>{});

参数

参数	描述
axios	我们引入 Vue axios 之后，Vue axios 为我们提供的发送 HTTP 请求的对象。
reqmethod	我们需要请求的方式，即上面的七种方式。
then	请求成功后，回调返回的数据，可以在这里进行处理。

Vue axios并发请求详解

语法

axios.all(iterable)
axios.spread(callback)

说明

Vue axios 并发请求借助于 axios.all 和 axios.spread 来完成。

Vue axios创建实例详解

语法

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

说明

使用 axios.create 可以使用自定义配置创建一个 axios 实例。

Vue axios拦截器详解

请求拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

说明

Vue axios 请求拦截器用于在请求被 then 或 catch 处理前拦截它们。

响应拦截器

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

说明

Vue axios 响应拦截器用于在响应被 then 或 catch 处理前拦截它们。

Vue axios请求配置

下面是创建请求时可用的配置选项，只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。

参数	说明
url	用于请求的服务器 URL
method	是创建请求时使用的方法
baseURL	baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL
transformRequest	允许在向服务器发送前，修改请求数据
transformResponse	在传递给 then/catch 前，允许修改响应数据
headers	是即将被发送的自定义请求头
params	是即将与请求一起发送的 URL 参数，必须是一个无格式对象(plain object)或 URLSearchParams 对象
paramsSerializer	是一个负责 params 序列化的函数
data	是作为请求主体被发送的数据
timeout	指定请求超时的毫秒数(0 表示无超时时间)
withCredentials	表示跨域请求时是否需要使用凭证
adapter	允许自定义处理请求，以使测试更轻松
auth	表示应该使用 HTTP 基础验证，并提供凭据
responseType	表示服务器响应的数据类型，可以是 “arraybuffer”, “blob”, “document”, “json”, “text”, “stream”
xsrfCookieName	是用作 xsrf token 的值的cookie的名称
xsrfHeaderName	是承载 xsrf token 的值的 HTTP 头的名称
onUploadProgress	允许为上传处理进度事件
onDownloadProgress	允许为下载处理进度事件
maxContentLength	定义允许的响应内容的最大尺寸
validateStatus	定义对于给定的HTTP 响应状态码
maxRedirects	定义在 node.js 中 follow 的最大重定向数目
httpAgent	在 node.js 中用于定义在执行 http 时使用的自定义代理
httpsAgent	在 node.js 中用于定义在执行 https 时使用的自定义代理
proxy	定义代理服务器的主机名称和端口
cancelToken	指定用于取消请求的 cancel token

Vue axios响应结构

axios 响应，包含以下信息。

属性	描述
data	服务器提供的响应数据
status	服务器返回的状态码
statusText	服务器响应的 HTTP 状态信息
headres	服务器响应头
config	请求提供的配置信息

Vue axios总结

Vue axios 提供了七种请求的方式，分别为 REQUEST、 GET、HEAD、DELETE、POST、PUT、PATCH。