2020-02-16 axios

• 这里只写了一些关注的点，比较简略，具体还要看网上各位大佬写的文章和文档

axios拦截器

• 主要有两种： 请求拦截器和响应拦截器
• 请求： 发送请求的时候统一处理，比如要在请求头headers里加东西，如会话id，token等

      let axios2 = axios.create({
        timeout: 1000,
      });
      axios2.interceptors.request.use(
        config => {
          config.headers.srcChannel = 'KAH';
          return config;
        },
        err => {
          return Promise.reject(err);
        }
      );

• 响应： 就是后端返回的响应进行处理，比如对errorCode进行判断等

      axios2.interceptors.response.use(
        response => {
          // 拦截响应，统一处理
          if (response.data.errorCode) {
            if (response.data.errorCode === '0') {
              return response;
            }
          }
          return Promise.reject(response);
        },
        error => {
          return Promise.reject(error)
        }
      );

axios的主要作用

• axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

axios 配置

• axios defalut 配置

// axios_init.js
import axios from 'axios';

// 设置默认的配置
axios.defaults.headers.testDefault = 'test2';

export default axios;

import axios from 'axios'
import axios_init from './assets/js/axios_init';

export default {
  name: 'app',
  components: {
    // HelloWorld
  },
  created() {
  },
  methods: {
    test() {
      let axios2 = axios.create({
        timeout: 1000,
      });
      axios2.interceptors.request.use(
        config => {
          config.headers.srcChannel = 'KAH';
          return config;
        },
        err => {
          return Promise.reject(err);
        }
      );
      axios2.interceptors.response.use(
        response => {
          // 拦截响应，统一处理
          if (response.data.errorCode) {
            if (response.data.errorCode === '0') {
              return response;
            }
          }
          return Promise.reject(response);
        },
        error => {
          return Promise.reject(error)
        }
      );
      axios2.get('/data3.json').then(res => {
        console.log(res);
      })
      axios_init.get('/data2.json').then(res => {
        console.log(res);
      })
    }
  }
}
</script>

自定义实例默认值

// 创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置的优先顺序

配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。这里是一个例子：

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();

// 覆写库的超时默认值
// 现在，在超时前，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;

// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});