axios在vue中的应用之axios实例

axios在vue中的应用之axios实例

1.实例创建和使用

使用场景：后端接口地址有多个，并且超时时长不一样，域名不一样时可以使用

使用：

      let instance = axios.create({

        baseURL:'/http://localhost:8080',

        timeout:1000

      })

  let axios2 = axios.create({

        baseURL:'/http://localhost:9090',

        timeout:5000

      })

//instance取代axion,其他写法一样

      instance.get('/data.json').then

      (res=>{

        console.log(res)

      })

2.配置常用参数有哪些

      axios.create({

        baseURL:'',//请求的域名，基本地址

        timeout:1000,//设置请求的超时时长，单位：ms,

        url:'',//请求的路径

        method:'get/post/put/patch/delete',//请求方法

        headers:{

          token:''

        },//设置请求头

        params:{},//设置参数，请求参数拼接在url上

        data:{},//请求参数放在请求体里

      })

2.1 有哪些地方可以进行参数配置

      //1.axios 全局配置

      axios.default.timeout = 1000 //默认的全局配置

      axios.default.baseURL='http://localhost:8080'

 

      //2.axios实例配置

      let instance = axios.create()

      instance.default.timeout = 3000

 

      //3.axios请求配置

      instance.get('/data.json',{

        timeout:5000

      })

优先级：全局<实例<请求配置

2.2 举例

    let instance = axios.create({

      baseURL:'http://localhost:9090',

      timeout:1000

    })

 

        let instance1 = axios.create({

      baseURL:'http://localhost:9091',

      timeout:3000

    })

 

    instance.get('/contactList',{

      params:{}

    }).then((res)=>{

      console.log(res)

    })

    instance1.get('/orderList',{

      params:{},

      timeout:5000 //使用的不是上面的3000

    }).then((res)=>{

      console.log(res)

    })