Skip to content

这一节介绍如何创建 Axios 实例,以及各种 config 之间的优先级。

5-1.创建instance

在实际项目中,如果我们始终使用 axios(config)axios.get(url[, config])axios.post(url[, data[, config]]) 来发送请求,那么每次请求都需要单独配置 config,这看起来有点过于繁琐。

较为理想的请求方式是这样的,只关注以下三个方面:

  • method
  • url
  • paramsdata(分别对应 get post 方式)

那么此时,我们可以通过 axios.create([config]) 来创建一个实例。

此处的 config,我们可以称作 instance config

js
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
})

创建 instance 之后,它会继承 axios 的所有属性和方法

使用 instance 创建的请求,都会有一份基础 instance config

那么我们在项目中,可以这样使用:

js
export const getSomeThing = function (params, config) {
  return instance.get('https://some-domain.com/api/', {
    params,
    ...config
  })
}

export const postSomeThing = function (data, config) {
  return instance.post('https://some-domain.com/api/', data, config)
}

为了不拘泥于 instance config,我们在封装方法的时候,可以把 config 暴露出来,以供二次覆盖。

这里的 config,可以称作 request config,也就是实际请求配置

5-2.config优先级

截止到本节,我们统共接触到了三种形式的 config

它们分别是(优先级从低到高):

  • defaults config 默认配置
  • instance config 实例配置
  • request config 实际请求配置

axios 请求触发时,这三者配置会有一个 merge 合并覆盖的过程。

高优先级配置会覆盖低优先级配置