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>