axios得到的响应结果：config、data、headers、request、status、statusText

axios拦截器

类似于坐地铁过安检

1. 请求拦截器

// 每次发请求之前都会调用请求拦截器
axios.interceptors.request.use(config=>{
    // 本次请求所有的信息，都在config中
    config.baseURL = 'http://localhost:5000'
    // 配置了公共URL，之后axios写路径都不需要
    return config
})

2. 响应拦截器

// 响应的结果——成功/失败
axios.interceptors.response.use(
    // 响应成功的回调
    (res)=>{    
        console.log('响应成功了',res)
        
        // 响应成功的回调一定要有return！(直接将data拿出来)
        return res.data
    },
    
    // 响应失败的回调
    (err)=>{
        console.log('响应失败了',err)
        
        // 只有返回一个失败的Promise实例，才算是失败的结果，否则都是成功
        // 响应失败的回调——方式一，需要try..catch包裹
        return Promise.reject(err)
        
        // 响应失败的回调——方式二(永远是pending状态，中断)
        // 第二种写法：接收请求结果，不需要包裹try...catch
        return new Promise(()=>{})
    }
)

async function test() {
    try {
        let res = await axios.get('/person')
        console.log('成功了',res)
    } catch (error) {
        console.log('失败了',error)
    }
}

请求方式：

GET——查

POST——增

PUT——改

DELETE——删

请求参数：

1、query参数（查询字符串参数）

2、params参数

3、请求体参数（JSON编码、urlencoded编码）

【注】：GET请求没有请求体！

get——query参数

// 根据id查询某一个人
async function test1() {
    // query参数——方式一——简写，拼接在url上
    let res = await axios.get('/person?id=xxxx')

    // query参数——方式二——配置项指定query参数
    // 第一个参数写路由，第二个参数写配置对象
    let res = await axios.get('/person', {
        // 携带query参数时，配置项叫params！！！
        params: {
            id: 'xxx'
        }
    })

    // 完整写法
    let res = await axios({
        url: '/person',
        // method默认就是get
        method: 'GET',
        params: {
            id: 'xxx'
        }
    })
    console.log(res)
}

get——params参数

// 根据年龄，获取一堆人
async function test(){
    // get方法传递params参数，只能拼在url中
    // let res = await axios.get('/filter/22')

    let res = await axios({
        url:'/filter/22',
        method:'GET'
    })
}

post请求——携带请求体参数

参数一：请求地址url 参数二：请求体参数三：配置对象

// 添加一个学生

async function test() {
    // 简单写法：json编码的请求体参数
    let res = await axios.post('/person', { name: 'Evelyn', age: 22 })

    // 简单写法：urlencoded编码的请求体参数
    let res = await axios.post('/person', 'name=Evelyn&age=22')

    // 完整写法
    let res = await axios({
        url: '/person',
        method: 'POST',
        // data也有两种写法
        // data:{ name: 'Evelyn', age: 22 },
        data: 'name=Evelyn&age=22'
    })
}

put请求——携带请求体参数

// 更新一个人
async function test() {
    // 简单写法：json编码的请求体参数
    let res1 = await axios.put('/person', { name: 'Evelyn', age: 22 })

    // 简单写法：urlencoded编码的请求体参数
    let res2 = await axios.put('/person', 'name=Evelyn&age=22')

    // 完整写法
    let res3 = await axios({
        url: '/person',
        method: 'PUT',
        // data也有两种写法
        // data:{ name: 'Evelyn', age: 22 },
        data: 'name=Evelyn&age=22'
    })
}

【注】：get和delete都是传递两个参数的，而post、put都传递三个参数 get没有请求体，以上方法都有params、query参数

axios为什么要进行二次封装？

axios.

如果超过了timeout的时间，就走失败的回调

如果想要每次请求，都设置超时时间、进度条、在请求头上添加某些信息、加一个路由前缀......

引入进度条的第三方库：除了要引入nprogress的包，还要单独地引入css样式，import引入css样式，不需要加from

utils文件夹（工具类文件夹，也可以是tools）中一般都存放reg.js foramtDate.js

axios.defaults.timeout axios.defaults.headers.a=100 这种方式对原生的axios也产生了影响，修改了整个项目的配置，所以不好

import axios from 'axios'

// 创建axios的实例对象
const x = axios.create({
    timeout:1
    headers:{a:100}
})

export default x

axios_restful API