`axios 创建实例及 axios 实例的相关配置

学习目标：axios 创建实例及 axios 实例的相关配置学习内容：axios 创建实例及 axios 实例的相关配置学习笔记：一、Axios创建实例axios 可以使用自定义配置新建一个 axios 实例axios.create([config])// 创建一个 axios 实例-----（index.js）const service = axios.create({baseURL: pr

努力学编程呀(๑•ี_เ•ี๑)

5097人浏览 · 2022-03-31 16:09:09

努力学编程呀(๑•ี_เ•ี๑) · 2022-03-31 16:09:09 发布

学习目标：

axios 创建实例及 axios 实例的相关配置

学习内容：

`axios 创建实例及 axios 实例的相关配置`

学习笔记：

一、Axios 创建实例
axios 可以使用自定义配置新建一个 axios 实例

axios.create([config])

// 创建一个 axios 实例-----（index.js）
const service = axios.create({
  baseURL: process.env.VUE_APP_API,
  timeout: 1000 * 180 // 请求超时时间
})

注意：使用创建的 axios 实例请求时，请求的配置项将与实例的配置合并。

举例：

// 用axios创建实例对象
const 自定义实例名 = axios.create({
    baseURl:'默认地址'    //例如：baseURL: 'http://localhost:8080',
    timeout: 1000 * 180 // 请求超时时间
    //还可以设置其他默认，比如请求类型、时间等
})

用创建的实例对象发送请求—（这样创建的实例几乎与axios一样）

自定义实例名.请求类型('默认外路径').then(res=>{     //例如：instance.get('/a.json')
    console.log(res);
})

二、axios 实例方法

以下是可用的实例方法，指定的配置将与实例的配置合并。

axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])

三、axios实例的相关配置

1、axios 实例常用配置

（1）baseURL 含义：请求的域名，基本地址，类型：String
（2）timeout 含义：请求超时时长，单位ms，类型：Number 超出时长后，后端返回401
（注：超时时长一般由后端定义，后端的接口需要的处理时长较长的时候，如果请求的时间过长，后端处理不过来，就会阻塞，给服务器造成较大的压力。设置后，可以及时释放掉。）
（3）url 含义：请求路径，类型：String
（4）method 含义：请求方法，类型：String
（5）headers 含义：设置请求头，类型：Object
（6）params 含义：请求参数，将参数拼接在URL上，类型：Object
（7）data 含义：请求参数，将参数放到请求体中，类型：Object

举例：

  axios.create({
        baseURL:'', //请求的域名（基本地址）
        timeout:2000, //请求的超时时长，单位毫秒，默认。
        url:'/data.json', //请求路径
        method:'get', //请求方法
        headers:{
            token:''
        }, //设置请求头
        params:{

        },//将请求参数拼接到url上
        data:{

        }, //将请求参数放置到请求体里
    });

2、axios 的三种配置方式：（优先级：axios请求配置 > axios实例配置 > axios全局配置）

（1）、请求配置

请求配置在 axios 创建请求时使用，只有 url 是必须存在的。
注：若创建请求时没有指定 method ，axios 请求将默认使用 get 方法。

例如：

this.$axios.get('/aaa.json',{
	timeout: 3000
}).then()

（2）、实例配置

例如：

    let instance = axios.create();
    instance.defaults.timeout = 3000

（3）、全局配置

例如：

axios.defaults.baseURL = ‘http://localhost:8080’
axios.defaults.timeout = 2000

***axios的三种配置有时会同时使用，但最终的有效配置是由优先级高的覆盖优先级低的配置。

举例：

（1）、请求配置

let ins1 = axios.create({
    baseURL:'http://localhost:8090',
    timeout:1000
})
ins1.get("/index",{
    params:{
        id:10
    }
}).then(res=>{
    console.log(res)
})

输出内容：配置的参数为baseURL：‘http://localhost:8090’，timeout:1000，method:‘get’，params:{ id:10}，url:’/index’

（2）、实例配置和请求配置

    let ins2 = axios.create({
        baseURL:'http://localhost:8091',
        timeout:2000
    })
    ins2.get("/index",{
        timeout:3500
    }).then(res=>{
        console.log(res)
    })

输出内容：配置的参数为baseURL：‘http://localhost:8091’，timeout:5000，method:‘get’，url:’/index’