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>