axios重修

axios
axios的cdn
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
axios是异步请求的工具
axios是基于Promise对ajax的封装

axios发送get无参请求
    axios({
        url:"http://localhost:2005/api/aab",
        method:"get"
    }).then(function(res){
        console.log(res)
    })

axios发送get有参请求

    // axios携带参数拼在url地址栏的写法
    axios({
        url:"http://localhost:2005/api/aab?id=1&name=马嘉宁",
        method:"get"
    }).then(function(res){
        console.log(res)
    })

// axios携带参数用一个params对象去写参数的写法
    axios({
        url:"http://localhost:2005/api/aab",
        method:"get",
        params:{
            id:"1",
            name:"马嘉宁"
        }
    }).then(function(res){
        console.log(res)
    })



axios.get的写法
    axios.get("http://localhost:2005/api/aab",
        {params:{
            id:"1",
            name:"马嘉宁"
        }}
    ).then(function(res){
        console.log("axios.get",res)
    })


axios.post的写法
    axios.post(
"http://localhost:2005/api/ppt",
        {
            id:"1",
            name:"马嘉宁"
        }
    ).then(function(res){
        console.log("axios.post",res)
    })
axios的post请求
    axios({
  method: 'post',
  url: 'http://localhost:2005/api/ppt',
  data: {
            id:"1",
            name:"马嘉宁"
        }
}).then(function(res){
        console.log("axios的post",res)
    })

axios.post 字段参数用&连接符【你们如果用的是对象的形式去传递字段的那么后端如果是java写的就需要转换一下，因为我们穿过去的参数默认是一个json,后端的java不识别所以需要转换,如果是听过&连接符号拼接上去的字段,就不需要转换后端java接收参数的时候
小添加@requestBody注解就可以解决对象传递字段无法识别的问题】
    axios.post(
"http://localhost:2005/api/ppt",'id=1&name=马嘉宁'
    ).then(function(res){
        console.log("and连接符",res)
    })



axios的迸发请求
方案一利用Promise的all处理
    // axios迸发请求
    axios.all([axios.get("http://localhost:2005/api/aab", {
        params: {
            id: "1",
            name: "马嘉宁"
        }
    }), axios.post(
        "http://localhost:2005/api/ppt", 'id=1&name=马嘉宁'
    )]).then((res) => {
        console.log(res)
    }).catch((err) => {
        console.log(err)
    })


// 方案二使用axios.spread回调函数把所有的请求结果以参数一res1和参数二res2的形式返回来
    axios.all([axios.get("http://localhost:2005/api/aab", {
        params: {
            id: "1",
            name: "马嘉宁"
        }
    }), axios.post(
        "http://localhost:2005/api/ppt", 'id=1&name=马嘉宁'
    )]).then(axios.spread(function(res1,res2){
        console.log("res1",res1)
        console.log("res2",res2)
    })).catch((err) => {
        console.log(err)
    })


axios的全局配置
    axios.defaults.baseURL=http://localhost:2005/api/aab//配置基础路径
    axios.defaults.timeout=5//配置请求时间如果在规定时间内没有返回结果就报错

    axios.get("http://localhost:2005/api/aab", {
        params: {
            id: "1",
            name: "马嘉宁"
        }
    }).then(function (res) {
        console.log("axios.defaults.timeoutaxios.get", res)
    }).catch((err)=>{
        console.log("axios.defaults.timeoutaxios.get错误",err)
    })


const request = axios.create({
    // baseURL: '/dev-api',//设置基础路径
    baseURL: "http://localhost:2006/",//设置基础路径
    timeout: 5000,//设置最大响应时间,左边设置的是5秒。
    // 就是如果向后端请求如果五秒都没有回来响应就会自动断开请求。
    //工作后：设置请求头，设置token。后端才会响应数据
    // headers: {'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjoiMTIzNDU2IiwiaWF0IjoxNTk1NTI0ODY3LCJleHAiOjE1OTYxMjk2Njd9.4jkcI0DMYv3A1REGXQsJmWtwsxBU7nuRvFO7NJz2pms'} 
  });

  //拦截器

  module.exports = request;//request==axios 但是又比axios多了一些基础设置
可以导出多个axios基础配置,并且以对象的形式去导出


axios拦截器
axios给我们提供了两大类拦截器,一种是请求方向的拦截器(成功的请求,失败的请求)
另一种是响应方的(成功的,失败的)
axios拦截器的主要作用:用于我们在网络请求的时候在发起请求或者响应时对操作进行响应的处理

请求拦截器
        // axios.defaults.baseURL="http://localhost:2005/api/aab"//配置基础路径
    axios.defaults.timeout=5000//配置请求时间如果在规定时间内没有返回结果就报错

    axios.interceptors.request.use((config)=>{
        console.log("进入请求拦截器")
        console.log("拦截器打印的config",config)
//拦截器打印的config是你请求的信息
        // 注意拦截请求之后如果想请求还能发出一定要return config
        return config //这步操作是放行请求,如果没有这一步是不会发请求的
    },(err)=>{
        console.log("请求方向失败")
        console.log(err)
    })

    axios.get("http://localhost:2005/api/aab", {
        params: {
            id: "1",
            name: "马嘉宁"
        }
    }).then(function (res) {
        console.log("axios.get", res)
    })

响应拦截器
    // 响应拦截器

    axios.interceptors.response.use((config)=>{
        console.log("进入请求拦截器")
        console.log("拦截器打印的config",config)
        // 打印的config 是你响应回来的所有数据信息
        // 如果你想让响应拿到的是响应回来的data数据,而其他的数据又不想要
        // 就不要直接return 返回config 而是return config.data
        return config.data//这一步是放行响应,如果没有这一步就算请求发送成功,后端的响应给前端也是成功的,我们前端也拿不到响应的数据
    },(err)=>{
        console.log("响应方向失败")
        console.log(err)
    })

    axios.get("http://localhost:2005/api/aab", {
        params: {
            id: "1",
            name: "马嘉宁"
        }
    }).then(function (res) {
        console.log("axios.get", res)
    })


axios模块封装
回调函数版本封装
axios封装
import axios from "axios"
export function request(url, success, fail) {
    axios({
        url
    }).then((res) => {
        success(res)
    }).catch((err)=>{
        fail(err)
    })
}

axios调用
import {
    request
} from "./utils/axios拦截器的高级封装.js"
request("http://localhost:2005/api/aab", function success(res) {
    console.log("请求成功的信息", res)
}, function fail(err) {
    console.log("请求失败的信息", err)
})

axios结合Promise的使用封装
axios封装部分axios拦截器的高级封装.js

import axios from "axios"
// data={url,method,params,timeout}
// data传参需要传入一个对象,url是完整的地址,
// method是你发送请求的方法只能传post或者get,
// params传入的参数为你发送请求时传入的字段
// timeout设置最大响应时间,左边设置的是5秒。
// 就是如果向后端请求如果五秒都没有回来响应就会自动断开请求。
export function request(data) {
    var {
        url,
        method,
        params,
        timeout
    } = data
    method = method.toLowerCase()
    let newVar = axios.create({
        timeout:timeout
    })
    if (method == "post"){
        return (newVar.post(
            url,
            params
        ))
    }else if(method == "get"){
        return (newVar.get(
            url,
            {params:params}
        ))
    }
}



axios封装使用范例
import {
    request
} from "./utils/axios拦截器的高级封装.js"
request({
    url: "http://localhost:2005/api/aab",
    method: "get",
    params: {
        id: "1",
        name: "马嘉宁"
    },
    timeout: 5000
}).then((res) => {
    console.log("get请求返回一个Promise对象的结果→", res)
}).catch((err) => {
    console.log("get请求返回一个Promise对象失败的结果→", err)
})

request({
    url: "http://localhost:2005/api/ppt",
    method: "post",
    params: {
        id: "1",
        name: "马嘉宁"
    },
    timeout: 5000
}).then((res) => {
    console.log("post请求返回一个Promise对象的结果→", res)
}).catch((err) => {
    console.log("post请求返回一个Promise对象失败的结果→", err)
})