axios 是什么
-
前端最流行的 ajax 请求库
-
react / vue官方推荐使用 axios 发 ajax 请求
-
文档 GitHub - axios/axios: Promise based HTTP client for the browser and node.js
axios 特点
-
基于 promise 的异步 ajax 请求库
-
浏览器端 / node 端都可以使用
-
支持请求 / 响应拦截器
-
支持请求取消
-
请求 / 响应数据转换
-
批量发送多个请求
axios 常用语法
nam | value |
---|---|
axios(config) | 通用 / 最本质的发任意类型请求的方式 |
axios(url[,config]) | 可以只指定 url 发 get 请求 |
axios.request(config) | 等同于axios(config) |
axios.get(url[,config]) | 发 get 请求 |
axios.delete(url[,config]) | 发 delete 请求 |
axios.post(url[,data,config]) | 发 post 请求 |
axios.put(url[,data,config]) | 发 put 请求 |
axios.defaults.xxx | 请求非默认全局配置 |
axios.interceptors.request.use() | 添加请求拦截器 |
axios.interceptors.response.use() | 添加响应拦截器 |
axios.create([config]) | 创建一个新的axios(他没有下面的功能) |
axios.Cancel() | 用于创建取消请求的错误对象 |
axios.CancelToken() | 用于创建取消请求的token对象 |
axios.isCancel() | 是否是一个取消请求的错误 |
axios.all(promise) | 用于批量执行多个异步请求 |
axios 安装
npm install axios
vue 项目使用
在 main.js
import axios from 'axios'
Vue.prototype.$api = axios
html 直接导入就行了
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
axios 简单使用
默认 get 请求
// 配置默认基本路径
axios.defaults.baseURL = 'http://localhost:8000'
// 默认get请求
axios({
url:"/post",
params:{
id:8
}
}).then(res=>{
console.log(res)
},err=>{
console.log(err)
})
post 请求
// post请求
axios.post("/post",{id:3}).then(result=>{
console.log(result)
},err=>{
console.log(err)
})
// 或
axios({
url:"/post",
method:'post'
data:{
id:3
}
}).then(result=>{
console.log(result)
},err=>{
console.log(err)
})
put 请求
axios.put("/posts/4",{
"title": "json-server---1",
"author": "typicode",
}).then(res=>{
console.log(res)
},err=>{
console.log(err)
})
// 或
axios({
url:"/posts",
method:'put '
data:{
"title": "json-server---1",
"author": "typicode",
}
}).then(res=>{
console.log(res)
},err=>{
console.log(err)
})
delete 请求
axios.delete("/posts/4",{
"title": "json-server---1",
"author": "typicode",
}).then(res=>{
console.log(res)
},err=>{
console.log(err)
})
// 或
axios({
url:"/posts",
method:'delete'
data:{
id:1
}
}).then(res=>{
console.log(res)
},err=>{
console.log(err)
})
axios 难点语法
axios.create(config) 对 axios 请求进行二次封装
根据指定配置创建一个新的 axios ,也就是每个axios 都有自己的配置
新的 axios 只是没有 取消请求 和 批量请求 的方法,其它所有语法都是一致的
为什么要这种语法?
需求,项目中有部分接口需要的配置与另一部分接口的配置不太一样
解决:创建2个新的 axios ,每个都有自己的配置,分别对应不同要求的接口请求
代码
import axios from 'axios'
// axios.create() 方法用于创建一个新的 axios
const axios = axios.create({
baseURL:'http://localhost:3000',
timeout:5000
})
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
export default axios
具体配置详见官网 起步 | Axios 中文文档 | Axios 中文网