17-axios实例

一、为什么要创建axios实例呢？

我们以前定义数组可以通过 let arr = new Array()定义，new一个构造函数就是实例化了函数，创建了一个实例对象。

有时候后台接口地址有多个并且超时时长不一样，我们不可能在axios中把每个后台请求的域名地址都拼接在URl中，并且在axios中的config写不同的超时时长，很繁琐，这个时候可以用到axios实例，在实例中可以配置这两种参数。

二、如何创建axios实例

1. 创建一个实例

let instance = this.$axios.create({
  baseURL:'http://localhost:8080',
  timeout:1000   //默认就是1000ms
})

instance.get('/data.json?userName="admin" ')
.then( res => {
  console.log(res);
})

当我们用这个实例去请求后台接口的时候，如果数据量较大，处理时间比较长，超出了定义的时间，还没有返回数据，那么报401错误，这时候前端也需要作出相处的处理（这个时长是由后台去规定多长时间的）。

2. 创建多个实例

let instance = this.$axios.create({
  baseURL:'http://localhost:8080',
  timeout:1000  
})

let axios_1 = this.$axios.create({
  baseURL:'http://localhost:9000',
  timeout:2000   
})

当然如果你的项目中只会用到一种域名，那么不需要定义两种实例，也可以直接使用get去请求。

三、axios实例的相关配置（config参数）

1. baseURL：请求的域名基本地址（如：http://localhost:8080）
2. timeout：后端定义的超时时长（默认是1000ms）
   作用：当我们去请求一个大的数据的时候，如果后台长时间没有返回结果，这样会阻塞其他的一些资源，占用资源会给运行服务器造成很大的压力，那么就需要及时释放这些不需要的内容，定义了超时时间比如超时了，不需要了，那么就可以释放掉它们。
3. url：请求的路径（如：/data.json）
4. method：请求方法（get、post.....）
5. headers：设置请求头
   比如有些接口需要登录建权，需要token认证来识别当前登录人的信息，那么可以在登录成功以后设置token
6. params：请求的参数拼接在url中
7. data：请求的参数放在request body中

四、有哪些地方可以进行这些参数的配置？

1. axios全局配置
2. axios实例配置
3. axiso请求方法配置

• 全局配置

this.$axios.defaults.baseURL = 'http://localhost:8080';
this.$axios.defaults.timeout = 1000;

一般的全局配置也就是用到了这两个参数

• 实例中配置

let instance = this.$axios.create({

})

假如新建了一个axios实例但是没有参数，取得就是全局的配置值，实例中如果有则优先取实例中的。
假如我想修改超时时长，不取全局的可以这么做

instace.defaults.timeout = 3000;

如果此时用实例去发起请求的时候，如果请求中没有配置超时时长，那么超时时长就是3000，而不是全局的1000ms。

• 请求配置

instance.get('/data.json', {
   params:{id:123},
   timeout:2000
})
.then( res => {
  console.log(res)
})

那么当我在发起请求的时候，超时时长就是2000ms，也就是说三种配置参数地方的优先级是：请求配置--->实例配置---->全局配置（高-->低）

五、常用参数配置在实际开发中的使用方法

一般的全局配置很少用到，因为它的局限性，能设置的就是baseURL和timeout，其他参数根据请求不同设置不同。

假如有两种请求域名地址（localhost:8080和localhost:9000）

let instance = this.$axios.create({
  baseURL:'http://localhost:8080',
  timeout:1000
})

let instance1 = this.$axios.create({
  baseURL:'http://localhost:9000',
  timeout:2000
})

instance.get('/data.json',{
  params:{ id:12 }
})
.then( res=>{
  console.log(res)
})
//用到了baseURL、timeout、url、method、params五种参数