axios的使用

查看axios详细介绍

axios 特色

• 浏览器端发起XMLRequests请求
• node端发起http请求
• 支持Promise API
• 拦截请求和返回
• 转化请求和返回（数据）
• 取消请求
• 自动转化json数据
• 客户端支持抵御XSRF（跨站请求伪造）

拦截器

// 请求拦截器
axios.interceptors.request.use(function(config){
  // 给所有请求添加token
  let token = localStorage.getItem("token");
  if(token) {
    config.headers["token"] = token;
  }
  return config
})
// 响应拦截器
axios.interceptors.response.use(function(response){return response})

配置项

• 单请求配置options：axios.post(url,data,options)
• 全局配置default: axios.defaults[xxx]
• config：请求拦截器中的参数
• response.config相应拦截器中的参数
• options
  • baseURL 基础URL路径
  • params 查询字符串（对象）
  • transformRequest 转换请求体数据
    function（post请求传递的数据）{}
  • transformResponse 转换响应体数据
    function（相应返回的数据）{}
  • headers 请求头信息
  • data 请求体数据
  • timeout 请求超时，请求以后多久未响应算是超时（毫秒）

import axios from "axios"
// 配置公共数据
axios.defaults.baseURL = "XXXX";
// 合并两个请求，并处理响应成功或失败
axios.all([
  axios.get("XXXX"),
  axios.post("XXX", "XXX=XXX", {})
])
.then(axios.spread((res1, res2)=>{
  // 两个请求都成功
}))
.cath((error)=>{
  // 任何一个失败
  console.log(error)
})

// 覆盖请求头
axios.defaults.headers = {}
// 修改请求头
axios.defaults.headers.accept = "XXX"
// 修改请求参数
axios.post("add", "name=jack", {
  timeout: 1000,
  transformRequest: function (data) {
    // 加工请求体数据
    return "name=rose";
  }
})
// 修改响应数据
axios.get("XXX",{
  params: {
    id: 1
  },
  transformResponse: function(data) {
    data = "XXX";
    return data;
  }
})

// 允许携带cookie
withCredentials: true

上传进度

let fd = new FormData();
let file;
//获取到页面中的<input type='file' @change='changeFile'/>
// ...<methords>
// changeFile (e) {
//   file = e.target.files[0]
// }
// ...
fd.append("file", file)
axios.post("/upload", fd, {
  onUploadProgess: (progessEvent) => {
    let rate = (progessEvent.loaded / progessEvent.total)*100
  }
})

取消请求

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// ...<data>
// this.source = source;
// ...

// ...<methords>
// cancel() {
//   this.source.cancel();//取消到之前的那个请求
// }
// ...

// options配置请求取消关联
cancelToken: source.token,

断点续传

// 前端及时获取当前文件的大小，存储起来
let file = <input type="file" />.files[0].slice(文件开始部分, 文件结尾部分);
let fd = new FormData().append("file", file);
// 后端：多次接收文件，都往同一个文件上追加