axios 认识
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装。
axios是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了很多的操作)
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
基本配置(创建时)
let axios = axios.create({
baseURL: 'http://localhost:9000/api',//设置基本请求地址
timeout: 1000 //超时时间})
效果和上面一致
axios.defaults.timeout = 1000;
axios.defaults.baseURL = 'http://localhost:9000/api';
请求方法 以及与express 对应取值方法
以下假设添加baseURL =http://localhost:3000
get 请求
前端 axios.get('/admin/123')
后端 app.get('/admin/:id',(req,res)=>{const id =req.params.id})
前端 axios.get('/admin?id=123')
后端 app.get('/admin',(req,res)=>{const id =req.query.id})
前端 axios.get('/admin',{params:{id:123}})
后端 app.get('/admin',(req,res)=>{const id =req.query.id})
post 请求
前端 axios.post('/admin',{id:123})
后端 app.get('/admin/:id',(req,res)=>{const id =req.body.id})
put请求(修改数据) 与get 请求一致 后端对应 app.put
delete 请求(删除数据)与get 请求一致 后端对应 app.delete
拦截器
拦截器:在请求或响应被处理前拦截它们。分为请求拦截器、响应拦截器
请求拦截器:
axios.interceptors.request.use(config=>{
//在发送请求前做些什么 config 可以设置之前初始化的操作
//config.headers.token = '', //需要登录拦截的请求
return config
}, err=>{
//在请求错误的时候做些什么
return Promise.reject(err)})
响应拦截器
axios.interceptors.response.use(res=>{
//请求成功对响应数据做处理
//例如 只要求拿到结果
return res.data
}, err=>{
return Promise.reject(err)})