查看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);
// 后端:多次接收文件,都往同一个文件上追加