axios实例

Posted 2022-12-28 harold-hua

创建实例

<template>
  <div class="home">
    
  </div>
</template>

<script>
// @ is an alias to /src
import axios from ‘axios‘;

export default 
  // axios实例
  // 后端接口地址有多个，并且超时时长不一样

  name: ‘axios3-1‘,
  created() 
    let instance1 = axios.create(
      baseURL: ‘http://localhost:8080‘,
      timeout: 1000,
    )

    let instance2 = axios.create(
      baseURL: ‘http://localhost:8081‘,
      timeout: 5000,
    )

    instance1.get(‘/data.json‘).then(res=>
      console.log(res)
    )

  ,

</script>

 

 

 

 

实例相关配置

<template>
  <div class="home">
    
  </div>
</template>

<script>
// @ is an alias to /src
import axios from ‘axios‘;

export default 
  // axios实例相关配置
  name: ‘axios3-2‘,
  created() 
    axios.create(
      baseURL: ‘http://localhost:8080‘,  //请求的域名，基本地址
      timeout: 1000,  //请求超时时长（ms）
      url: ‘/data.json‘,  //请求路径
      method: ‘get, post, put, patch, delete‘,  //请求方法
      headers: 
        token: ‘‘,
      ,  //设置请求头
      params: 

      ,  //请求参数拼接在url上
      data: 

      ,  //请求参数放在请求体
    )

    // 相当于添加上面的配置信息
    // axios.get(‘/data.json‘,
    //   params:,
    // )


    // 1.axios全局配置
    axios.defaults.timeout = 1000;
    axios.defaults.baseURL = ‘http://localhost:8080‘;
    // 2.axios实例配置
    let instance = axios.create();
    instance.defaults.timeout = 3000;
    // 3.axios请求配置
    instance.get(‘/data.json‘,
      timeout: 5000,
    )


  ,

</script>

 

 

 

 

常用参数配置具体使用方法

<template>
  <div class="home">
    
  </div>
</template>

<script>
// @ is an alias to /src
import axios from ‘axios‘;

export default 
  // axios实例相关配置
  name: ‘axios3-2‘,
  created() 
    axios.create(
      baseURL: ‘http://localhost:8080‘,  //请求的域名，基本地址
      timeout: 1000,  //请求超时时长（ms）
      url: ‘/data.json‘,  //请求路径
      method: ‘get, post, put, patch, delete‘,  //请求方法
      headers: 
        token: ‘‘,
      ,  //设置请求头
      params: 

      ,  //请求参数拼接在url上
      data: 

      ,  //请求参数放在请求体
    )

    // 相当于添加上面的配置信息
    // axios.get(‘/data.json‘,
    //   params:,
    // )


    // 1.axios全局配置
    axios.defaults.timeout = 1000;
    axios.defaults.baseURL = ‘http://localhost:8080‘;
    // 2.axios实例配置
    let instance = axios.create();
    instance.defaults.timeout = 3000;
    // 3.axios请求配置
    instance.get(‘/data.json‘,
      timeout: 5000,
    )



    //实际开发
    //有两种请求接口
    //http://localhost:9090
    //http://localhost:9091
    let instance1 = axios.create(
      baseURL: ‘http://localhost:9090‘,
      timeout: 1000,
    )

    let instance2 = axios.create(
      baseURL: ‘http://localhost:9091‘,
      timeout: 3000,
    )

    //baseUrl, timeout, url, method, params
    instance1.get(‘/contactList‘, 
      params: ,
    ).then((res)=>
      console.log(res)
    )

    //baseUrl, timeout: 5000, method, url
    instance2.get(‘/orderList‘, 
      timeout: 5000,
    ).then((res)=>
      console.log(res)
    )


  ,

</script>

 

 

 

 

拦截器

<template>
  <div class="home">
    
  </div>
</template>

<script>
// @ is an alias to /src

// 拦截器：在请求或响应被处理前拦截它们

// 请求拦截器，响应拦截器
import axios from ‘axios‘;

export default 
  name: ‘axios3-3‘,
  created() 
    // 请求拦截器
    axios.interceptors.request.use(config=>
      // 在发送请求前做些什么
      return config
    ,err=>
      // 在请求错误的时候做些什么
      return Promise.reject(err)
    )

    // 响应拦截器
    axios.interceptors.response.use(res=>
      // 请求成功对响应数据做处理
      return res
    ,err=>
      // 响应错误做些什么
      return Promise.reject(err)
    )


    // 取消拦截器（了解）
    let interceptors = axios.interceptors.response.use(config=>
      config.headers=
        auth: true,
      
      return config
    )
    axios.interceptors.response.eject(interceptors)


    //实际开发
    //登录状态（token: ‘‘），访问需要登录的接口
    let instance = axios.create()
    instance.interceptors.request.use(config=>
      config.headers.token = ‘‘;

      return config;
    )
    //访问不需要登录的接口
    let newInstance = axios.create()

    // 移动端开发
    let instance_phone = axios.create()
    instance_phone.interceptors.use(config=>
      $(‘#modal‘).show()
      return config
    )
    instance_phone.interceptors.response.use(res=>
      $(‘#modal‘).hide()
      return res
    )


  ,

</script>