1.axios的默认配置

在axios配置中存在baseUrl，header等配置，每次做的axios时，不一定所有的配置都要自己写，这时候要做一个默认值,如下:

//获取按钮
const btns = document.querySelectorAll('button');
//默认配置(设置完默认设置后就不需要再axios函数里面设置了)
axios.defaults.method = 'GET';//设置默认的请求类型为 GET
axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
axios.defaults.params = {id:100};//设置url参数
axios.defaults.timeout = 3000;//设置超时时间

btns[0].onclick = function(){
    axios({
        // 我们在这里就无需配置这些杂项了
        url: '/posts'
    }).then(response => {
        console.log(response);
    })
}

运行结果:(同样能接收和发送请求)

2.axios 的create方法(重要,常用)

**语法:**axios.create(config)
1.根据指定配置创建一个新的 axios, 也就就每个新 axios 都有自己的配置
2.新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的

3.为什么要设计这个语法?

(1)需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
(2)解决: 创建 2 个新 axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中

例子:

(用回上文提到的例子,此时这里已经设置了默认的全局配置,此时又有一个新的请求要指向另一台服务器,且请求方法是post,这时就能用到 axios的create()方法了)

//切记使用create()方法创建新的axios需要写在默认设置的前面
const axios2 = axios.create({
    // 要求:指向另一台服务器,请求方法为post
    // url为:http://abc/posts
    method:'POST',
    baseURL:'http://abc'
})
//获取按钮
const btns = document.querySelectorAll('button');
//默认配置(设置完默认设置后就不需要再axios函数里面设置了)
axios.defaults.method = 'GET';//设置默认的请求类型为 GET
axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
axios.defaults.params = {id:100};//设置url参数
axios.defaults.timeout = 3000;//设置超时时间

// 新的按钮点击发送新的要求,这时这个axios封装的属性就不再是调用全局默认属性,而是使用create()方法创建出来的axios2了
btns[1].onclick = function(){
    axios2({
        url: '/posts'
    }).then(response => {
        console.log(response);
    })
}

3.请求拦截器(axios.interceptors.request.use())

请求拦截器的本质是一个在真正发送请求前的函数（回调函数）
作用:对所用的请求做统一的处理:如追加请求头,追加参数,界面loading提示等..
请求拦截器相当于进地铁站过安检,接收axios的所有配置项,检查过后返回所有配置项

练习demo

// 请求拦截器(axios.interceptors())
// 请求拦截器的本质是一个函数（回调函数）
// 请求拦截器相当于进地铁站过安检,接收axios的所有配置项,检查过后返回所有置项

// 请求拦截器一般写在最前面(一般写法)
// 1.一般是用于token监测(token1是用户的凭据,通过获取token来查看你是否右相对应的权限)
// 2.一定要有返回值
axios.interceptors.request.use((config)=>{
    // 比如这里我写一个demo要求当时间戳为偶数的时候,给响应头信息添加一个a=1属性
    if(Date.now() % 2 === 0){
        config.headers.a = 1;
    }
    // 潜规则变量名写config
    console.log(config);
    return config
})


// 获取按钮
const btn = document.querySelector('button');

// 注册点击事件
btn.onclick = function(){
    // 点击向json-server服务器发送请求获取文章信息
    axios.get('http://localhost:3000/posts/1').then(response =>{
        console.log(response);
    })
}

运行结果:

多个请求拦截器存在的执行顺序问题(一般项目开发中用不到!)

就是:后指定的先执行!

// 请求拦截器1
axios.interceptors.request.use((config)=>{
    // 比如这里我写一个demo要求当时间戳为偶数的时候,给响应头信息添加一个a=1属性
    if(Date.now() % 2 === 0){
        config.headers.a = 1;
    }
    // 潜规则变量名写config
    console.log('请求拦截器1执行了',config);
    return config
})

// 请求拦截器2
axios.interceptors.request.use((config)=>{
    // 比如这里我写一个demo要求当时间戳为偶数的时候,给响应头信息添加一个a=1属性
    if(Date.now() % 2 === 0){
        config.headers.a = 1;
    }
    // 潜规则变量名写config
    console.log('请求拦截器2执行了',config);
    return config
})

运行结果:

原理解析:

从头到尾请求拦截器里面传的参数config都是一个东西,他没有变,因为是后指定的先执行,所以这个config在请求拦截器2中执行过后,又传递给了请求拦截器1再执行一遍而已!

图解:

4.响应拦截器(axios.interceptors.response.use())

响应拦截器是得到响应后执行的一个回调函数(你得到一个响应,这个响应还没送到程序员手里,就已经调用了响应拦截器)
作用:
- 若请求成功，对成功的数据进行处理，成功的回调函数, 传递的默认是 response
- 若请求失败，对失败进行下一步操作，失败的回调函数, 传递的默认是 error
应用场景:
- 一般直接在这里截获数据,然后直接将数据返回(response.data),那后面成功的回调接到的数据就是纯数据了

练习demo

// 请求拦截器(这里的请求拦截器什么也不走,就接收数据返回数据)
axios.interceptors.request.use((config)=>{
    console.log('请求拦截器执行了',config);
    return config
})

// 响应拦截器(比请求拦截器应用得更广泛,项目开发没有不用相应拦截器的)
// 1.是什么?
    // 得到响应后执行的一个回调函数(你得到一个响应,这个响应还没送到程序员手里,就已经调用了响应拦截器)
// 2.作用：
    // 若请求成功，对成功的数据进行处理，成功的回调函数, 传递的默认是 response
    // 若请求失败，对失败进行下一步操作，失败的回调函数, 传递的默认是 error
// 3.应用场景:
    // 一般直接在这里截获数据,然后直接将数据返回(response.data),那后面成功的回调接到的数据就是纯数据了
            
// 响应拦截器
axios.interceptors.response.use(
    // 成功的回调
    response =>{
        console.log('响应拦截器成功的回调执行了!', response);
        // 响应拦截器成功的回调一定要有返回值
        // 比如我这里有一个要求:时间戳为偶数返回数据,时间戳为奇数不返回数据

        // 时间戳为偶数,返回数据
        if (Date.now() % 2 === 0) return response.data;
        // 时间戳为奇数不返回数据                      
         else return '此时时间戳为奇数,不能给你返回数据!'                     
    },
    // 失败的回调
    // axios认为状态码不是2开头的都是失败的请求
    error => {
        console.log('相应拦截器失败的回调执行了', error);
        // 响应拦截器失败回调的返回值影响着后面走的成功的回调还是失败的回调
        // 这套规则与 .then方法 十分的相像(只要你返回的是非promise值,那么必定返回成功,返回的是promise值,就看当前这个promise的状态)
        // 如:

        // 1.返回的是 非Promise值
        // return 100 //最后走的是成功的回调:成功的回调最后返回的数据! 100

        // 2.返回的是 Promise值
        return Promise.reject(error) //这回就走失败的回调了 :失败的回调返回的原因! AxiosError
    }
)
        
// 获取按钮
const btn = document.querySelector('button');

// 注册点击事件
btn.onclick = function(){
    // 点击向json-server服务器发送请求获取文章信息
    axios.get('http://localhost:3000/posts/10').then(response =>{
        console.log('成功的回调最后返回的数据!',response);
    },error => {
        console.log('失败的回调返回的原因!',error);
    })
}

运行结果:

一般返回成功
应用场景:直接在响应拦截器中截取数据返回数据,最后在成功回调中返回的就是纯数据
响应拦截器失败的回调返回的是非Promise值时返回的必定成功,最后走成功的回调返回值就是响应拦截器失败回调返回的值(你写入的非promise值)
响应拦截器失败的回调返回的是Promise值时返回值看给Pormise状态,成功最后就走成功的回调,失败最后就走失败的回调,返回值就是resolve()或reject()里面传入的值

响应拦截器一般在项目开发中是用来截获数据,获取失败的!(结合async和await来使用)

我们在项目开发中,使用响应来解其来获取失败,一般是这样做,在响应拦截器中统一处理失败,无需再在失败回调中处理了,代码如下所示:

// 请求拦截器(这里的请求拦截器什么也不做,就接收数据返回数据)
axios.interceptors.request.use((config)=>{
    console.log('请求拦截器执行了',config);
    return config
})

// 响应拦截器
axios.interceptors.response.use(
    // 成功的回调
    response =>{
        console.log('响应拦截器成功的回调执行了!', response);
        // 响应拦截器成功的回调一定要有返回值
        return response.data;                  
    },
    // 失败的回调
    // axios认为状态码不是2开头的都是失败的请求
    error => {
        // 项目中常用的处理失败
        console.log('响应拦截器失败的回调执行了!');
        alert(error);
        // 这里返回一个pending(未完成)状态的Promise对象来中断Promise链,这样后面的回调就不用再写.then方法了!
        return new Promise(()=>{})
    }
)
        
// 获取按钮
const btn = document.querySelector('button');

// 项目开发中的常用嵌套 async和await(只要成功的结果,失败的结果由相应器负责捕获和输出)
btn.onclick = async () => {
    const reslut = await axios.get('http://localhost:3000/posts/10')
    console.log(reslut);//若是失败则不会输出结果,成功则只返回数据
}