axios
node里的app.use是在声明使用一个中间件,use里的中间件是个函数,是可以对我们的请求或响应做特定处理的函数
这里是post请求,post请求参数使用请求体携带,但请求体携带有两种格式:
1.name=tom&&pwd=123 :是urlencoded的形式 这个服务器都接受的 但json格式就不一定
app.use(express.urlencoded({extended:true}))
2.app.use(express.json()) //请求参数是json结构{name:'tom",pwx:123}
本质上都是文本字符串,就是格式不一样
如果后台没有使用2这个中间件,那么后台无法解析Json格式的参数
如果公司项目只支持1的格式,axios默认只用json格式请求体携带参数数据,但是后台不支持
axios的data是对象格式,后台不支持,我们要把data转成后台支持的,没必要自己拼
post请求体参数格式
1)Content-Type:application/x-www-form-urlencoded;charset=utf-8
用于键值对参数,参数的键值用=链接,参数之间用&链接
2)Content-Type:application/json;charset=utf-8
用于json字符串参数 {name:'fds";pwd:12}
3)Content-Type:multipart/form-data
用于文件上传请求
axios里有个工具包 叫qs 安装好axios后自动带有qs
const qs = require('qs')
import qs from 'qs' const data = {"bar":123} const option = { method:'post', headers:{'content-type':'application/x-www-form-urlencoded'} data:qs.stringfy(data), url } axios(option)
但以后每次请求都要qs.stringfy不方便
这时候用axios的一个技术语法,叫拦截器interceptors
axios.interceptors.request.use请求拦截器
axios.interceptors.response.use响应拦截器
拦截器本事本质上是个函数
axios.interceptors.request.use(function(config){
})
<script> import axios from 'axios' import qs from 'qs' //添加请求拦截器:让post请求的请求体格式为urlencoded格式 a=1&b=2 //在发请求前执行 axios.interceptors.request.use(function(config){ //得到请求方式和请求体数据 const {method,data} = config //处理post请求,将data对象转换成query参数格式字符串 if(method.toLowerCase==='post' && typeof data==='object'){ config.data = qs.stringify(data) } return config }) export default axios </script>
axios是基于promise的
axios({}).then(res=>{}) //res得到的是返回来的对象,包含一堆东西,有status,data等...
res.data得到的才是后端返回给我们的数据
如果要判断服务器层面的请求成功与失败,应该在res.status里看
这时候用响应拦截器统一判断
<script> Login.js handleSubmit = e => { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { reqLogin(values).then(res=>{ },
err=>{ //这个是在axios.intercepter.response里的function(error)里先执行完后再执行这里的error 也就是执行了两次,
而且信息也是一样的,是浏览器请求失败的信息,并没有拿到后端给的信息,
所以这里回调的err没有什么用,应该在axios.intercepter里统一做浏览器请求失败处理,所以这个err函数可以删除不用 alert('请求失败了'+err.message) //使用了return new Promise(()=>{}) 中断了promise 就不会执行这条了 }) } }); }; axios.js //添加响应拦截器 //让请求成功的结果不再是response,而是response.data的值 //在请求返回之后且在我们指定的请求回调函数之前 axios.interceptors.response.use(function(res){ return res.data //返回的结果就会交给我们指定的请求响应的回调 },function(err){//统一处理所有请求的异常错误 // return Promise.reject(error) alert('请求出错'+ err.message) //返回一个pending状态的promise,中断promise链 return new Promise(()=>{}) }) </script>
api/index.js
<script> import axios from './axios' const BASE = "" // export function reqLogin(param){ // axios({ // method:'post', // url:BASE+'/login', // data:param // }) // } //写成箭头函数的形式 // export const reqLogin = (param)=>{//不要写{} 写{},=>就没有return 的作用了 用()包裹 // } /* 这个方法可以: export const reqLogin = (param) => ( axios({ method: 'post', url: BASE + '/login', data: param }) ) */ //这个也可以 export const reqLogin = (param) => (axios.post(BASE + '/login', param)) </script>