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>