从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
npm install axios 或者 yarn 或者 cnpm
// 封装Ajax,实现axios进行回调
var axios = {
get: function(url){
return new Promise((resolve,reject) => {
var xhr = new XMLHttpRequest();
xhr.open('get',url,true) ;
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
// 从服务端获取数据
// fn.call(this, xhr.responseText)
resolve(xhr.responseText)
}
};
xhr.send();
})
},
}
可以通过向 axios 传递相关配置来创建请求
axios(config) config是一个配置选项对象: {属性名:属性值}
{
method:"get" || "post",
url:"url地址",
//post请求 数据放在data中
data:{
username:"admin",
password:"admin"
},
//get请求: 数据放在params中 字符串拼接
params:{
username:"admin",
password:"admin"
},
headers:{
token: "一窜字符串"
},
timeout: 3000
}
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
以下是可用的实例方法。指定的配置将与实例的配置合并。
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
处理并发请求的助手函数
axios.all(iterable) axios.all([getUser(),getNumber(),getProduct()])
axios.spread(callback)
在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
<template>
<div class="hello">
<h2> axios的使用</h2>
<a href="javascript:" class="btn btn-primary" @click="get">GET请求</a>
<a href="javascript:" class="btn btn-primary" @click="post">POST请求</a>
<a href="javascript:" class="btn btn-primary" @click="http">HTTP请求</a>
</div>
</template>
<script>
import axios from "axios"
export default {
name: 'HelloWorld',
data () {
return {
}
},
methods:{
get(){
axios.get("https://cnodejs.org/api/v1/topics",{
//get参数
params:{
tab:"share",
page:3
},
headers:{
token:"tom"
}
}).then(res=>{
console.log(res)
}).catch(error=>{
console.log(error)
})
},
post(){
axios.post(
"https://cnodejs.org/api/v1/accesstoken",
{
//post参数
accesstoken:"80afb815-b9f6-48e7-8370-7647e4d74d87"
},
{
headers:{
token:"tom"
}
}
).then(res=>{
console.log(res)
}).catch(error=>{
console.log(error)
})
},
http(){
axios({
//url:"https://cnodejs.org/api/v1/topics",
//method:"get",
//get参数
//params:{
// tab:"share",
// page:2
//},
url:"https://cnodejs.org/api/v1/accesstoken",
method:"post",
//post请求参数
data:{
//post参数
accesstoken:"80afb815-b9f6-48e7-8370-7647e4d74d87"
},
headers:{
token:"tom"
},
timeout: 10000,
}).then(res=>{
console.log(res)
}).catch(error=>{
console.log(error)
})
}
}
}
</script>
## 取消axios请求
使用 cancel token 取消请求
Axios 的 cancel token API 基于cancelable promises proposal,它还处于第一阶段。
可以使用 CancelToken.source 工厂方法创建 cancel token,像这样: