axios实例

创建axios实例

可以使用自定义配置新建一个 axios 实例
axios.create([config])
timeout 超时时长 默认是1秒，超时时长的意思是，发起请求的时候，服务端长时间没有返回数据，接口就会报超时401具体的超时时长一般是由后端定义的，比如当前端请求了一个比较大的数据，后端需要进行处理，一旦处理时间过长，比如超过1秒那么后端可能就直接返回401，告诉前端接口超时了，这个时候其实前端也需要做响应的处理

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

     //axios实例的用法
     instance.get('/data.json').then(res=>{
          console.log(res)
     })

为什么要创建axios实例，它与我们直接使用的axios.get这样的写法有什么区别？
引入axios,然后在页面中进行请求axios.get('url').then(res=>{}),这里默认会导出实例，通常使用这个axios就可以了
而之所以要创建axios实例，是因为我们实际工作项目中，可能需要访问多个服务地址，而这些服务请求和响应的结构也可能都完全不同，那么你可以通过axios.create创建不同的实例来处理。
比如axios1是用http状态码确定响应是否正常，而axios2是服务器自己定义的状态码，又或者他们请求头不同，支持的content-type不同，那么我可以单独为axios1和axios2写拦截器。（摘自：https://segmentfault.com/q/1010000016473273?sort=created
）

axios实例的配置

    //常用的基本配置
    axios.create({
        baseURL:'http://localhost:8080', //请求的域名，基本地址
        timeout:5000,  //请求的超时时长，单位毫秒
        url:'/data.json',  //请求的路径
        method:'get，post，put，patch，delete' , //请求方法
        headers:{
            token:''  //比如token登录鉴权，请求的时候携带token，让后端识别登录人的信息
        },   //请求头
        params:{},  //请求参数拼接在URL上
        data:{},    //请求参数放在请求体里

    })

都哪里可以配置axios呢

axios全局配置

//axios.defaults.后边跟的就是axios的那些配置
//一般修改的全局配置，也就下边这两个
axios.defaults.timeout = 1000 
axios.defaults.baseURL = 'http://localhost:8080'

axios实例配置

//如果create()里不添加参数的话，在创建这个axios实例的时候，使用的就是全局的配置
// 这个时候instance的timeout是1000
const instance = axios.create(); 

//如果设置了全局的配置，但是又想在创建的实例里修改配置怎么办
instance.default.timeout = 3000
axios请求配置
    let instance = axios.create();
    instance.get('/data.json',{
        timeout:5000
    })

这3种配置方法的优先级是 axios请求配置 > axios实例配置 > axios全局配置

具体的使用

在实际开发项目中，全局配置的局限性比较大，一般我们会全局配置两个参数,axios.defaults.timeout和axios.defaults.baseURL

假如我们有两个请求接口，那么我们一般的做法是创建两个axios实例

const instance1 = axios.create({
      baseurl:'http://localhost:8080',
      timeout:'1000'
})

const instance2 = axios.create({
      baseurl:'http://localhost:9090',
      timeout:'3000'
})

//instance1这里用到的参数有 baseurl,timeout,method,url
instance1.get('/userinfo').then(res=>{
  console.log(res)
})

//instance2这里用到的参数有 baseurl,timeout,method,url，params,并且对timeout进行了修改
instance1.get('/orderlist',{
    timeout:'5000'
    params:{}
}).then(res=>{
  console.log(res)
})

来源： https://www.jianshu.com/p/636aa0e565a5