axios实例

创建实例

<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>

 

 

 

 

错误处理

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

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

// 错误处理：请求错误时进行的处理
import axios from 'axios';

export default {
  

  name: 'axios3-4',
  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)
    })
    axios.get('/data.json').then((res)=>{
      console.log(res)
    }).catch(err=>{
      console.log(err)
    })


    //例子：实际开发过程中，一般添加统一错误处理
    let instance = axios.create({})

    instance.interceptors.request.use(config=>{
      return config
    },err=>{
      //请求错误处理，一般http状态码以4开头，常见：401超时，404 not found
      $('#model').show()
      setTimeout(()=>{
        $('#model').hide()
      },2000)
      return Promise.reject(err)
    })

    instance.interceptors.response.use(res=>{
      return res
    },err=>{
      //响应错误处理，一般http状态码以5开头，500系统错误，502系统重启
      $('#model').show()
      setTimeout(()=>{
        $('#model').hide()
      },2000)
      return Promise.reject(err)
    })


    // 上面已经做了错误处理，实际使用时不需写catch，除非有特殊的需要处理才添加catch
    instance.get('/data.json').then(res=>{
      console.log(res)
    }).catch(err=>{
      console.log(err)
    })
  },
}
</script>

 

 

 

 

取消请求

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

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

// 用于取消正在进行的http请求（了解）
import axios from 'axios';

export default {
  

  name: 'axios3-5',
  created() {
    let source = axios.CancelToken.source()
    axios.get('/data.json',{
      cancelToken: source.token
    }).then(res=>{
      console.log(res)
    }).catch(err=>{
      console.log(err)
    })

    //取消请求(message可选)
    source.cancel('cancel http')

    //什么情况下可能用到取消请求：CRM操作的时候
  },
}
</script>