Axios
简介
Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js , Axios 使用简单,包尺寸小且提供了易于扩展的接口。
特性
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
使用
安装
npm install axios
CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
get 请求
- 发起一个 get 请求
axios({
method: "get",
url: "url",
}).then((res) => {
console.log(res);
});
- 简写
axios.get("url").then((res) => {
console.log(res);
});
post 请求
- 发起一个 post 请求
axios({
method: "post",
url: "url",
data: {
username: "rido",
pwd: "123456",
},
}).then((res) => {
console.log(res);
});
- 简写
axios.post("url", {
username: "rido",
pwd: "123456",
})
.then((res) => {
console.log(res);
});
request封装
- request.js
import axios from 'axios'
// 创建一个实例
const instance =axios.create({
baseURL: 'baseURL',
timeout: 1000
})
// 拦截器-请求拦截
instance.interceptors.request.use(config=>{
// 在发送请求之前做些什么
return config;
}, error=> {
// 对请求错误做些什么
return Promise.reject(error);
});
// 拦截器-响应拦截
instance.interceptors.response.use(response=> {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, error=> {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
export default instance;
- api.js
import request from './request.js'
// 按需导出每个请求
// 导出一个get请求
export const GetApi =(id)=>request.get('/api',{params:id});
// 导出一个post请求
export const PostApi=(params)=>request.post('/api',params)
更多内容可以查看 https://www.axios-http.cn/
Q.E.D.