【VUE3】保姆级基础讲解（六）Axios库

目录

Axios介绍与原生的差异

 发送常见的请求和配置选项

1、发送request请求

 baseURL ：

 2、发送get请求

  3、发送post请求

axios.all

Axios创建新的实例

 请求和响应拦截

请求拦截

响应拦截 

---

Axios介绍与原生的差异

Axios其实就是一个网络请求库

与原生的差异：

1. 原生的网络请求需要自己封装
2. 原生某些功能不具备，需要自己完成，例如请求拦截，响应拦截
3. JS可以运行在浏览器和Node中，但是使用原生的某些方法无法运行在Node，例如fetch

 发送常见的请求和配置选项

 

1、发送request请求

axios.request({配置}).then(res=>{回调}) 

axios.request({
    url:'http://123.207.32.32:8000/home/multidata',
    method:'get'
}).then(res=>{
    console.log(res);
})

常见的配置选项： 

 baseURL ：

当我有多个网络请求都是在一个根url下时，可以使用baseURL，可以省略写跟url： 

const baseURL = 'http://123.207.32.32:8000'
axios.defaults.baseURL = baseURL
axios.request({
    url:'/home/multidata',
    method:'get'
}).then(res=>{
    console.log(res);
})

 2、发送get请求

这里的params指的是配置，可以理解为在运行时会加到url后面 

axios.get('http://123.207.32.32:9001/lyric',{
    params:{
        id:500665346
    }
}).then(res=>{
    console.log(res);
})

  3、发送post请求

可以发送一些数据 

axios.post('http://123.207.32.32:1888/02_param/postjson',{
    data:{
        name:'lee',
        password:123456
    }
}).then(res=>{
    console.log(res);
})

axios.all

可以一次性发送多个网络请求，当全部完成后才会回调

axios.all([
    axios.get(),
    axios.get()
]).then()

Axios创建新的实例

axios除了可以直接用上面那种的默认实例对象，也可以自己创建

为什么要创建axios实例？

当我们从axios模块中导入对象时,使用的实例是默认的实例;当给该实例设置一些默认配置时,这些配置就被固定下来了.但是后续开发中,某些配置可能会不太一样;
比如某些请求需要使用特定的baseURL或者timeout等.
这个时候,我们就可以创建新的实例,并且传入属于该实例的配置信息.
 

const instance = axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:1000,
    headers:{}
})

那么不同的实例就可以设置不同的配置信息

 请求和响应拦截

请求拦截

在发送请求的过程中进行拦截

axios.interceptors.request.use((config)=>{
    console.log('请求成功');
},(err)=>{
    console.log('请求失败');
})

响应拦截 

在得到数据的过程中拦截

axios.interceptors.response.use((res)=>{
    return res.data
},(err)=>{
    return err
})