axios详解 - 掘金

axios是什么

前端最流行的 ajax请求库
react/vue官方推荐使用axios发ajax请求
文档 github.com/axios/axios

axios特点

基于promise的异步ajax请求库
浏览器端/node端都可以使用
支持请求/响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

axios配置-实例创建方法1

创建一个实例


import axios from 'axios'
let config = {
  baseURL: '接口地址',
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
}

export default axios.create(config)

axios配置-实例创建方法2


let axiosObj = axios.create()

// axios 配置
axiosObj.defaults.timeout = 5000
let axiosDate
// http request 拦截器
axiosObj.interceptors.request.use(
    config => {
      config.withCredentials = true // 开启跨域能力 是否携带cookie
      if (store.state.token) {
        config.headers.Authorization = `token ${store.state.token}`
      }
      
      if ( (config.data && config.data.loading === 'false') || (config.params && config.params.loading === 'false') || config.loading === 'false') {
      } else {
        axiosDate = new Date()
        store.dispatch('LOADING', true)
      }
        const axiosConfig = 1 ? fn(config) : config
      }
)
      

const fn = (config) => {
  let accept = config.headers.common['Accept']
  if (accept == null) {
    accept = '*/*'
    config.headers['Accept'] = accept
  }
  let date = config.headers['date']
  if (date == null) {
    date = ''
  }
  let contentType = config.headers['contentType']
  if (contentType == null) {
    contentType = ''
  }
  let {method, url, params} = config
 
  config.headers['X-x'] = "x"
  config.headers['X-x'] = 'x'
  return config
}

全局修改axios默认配置


axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

实例默认配置

// 创建实例时修改配置
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 实例创建之后修改配置
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

实例的方法

以下是所有可用的实例方法，额外声明的配置将与实例配置合并


axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])

配置优先级

配置项通过一定的规则合并，request config > instance.defaults > 系统默认，优先级高的覆盖优先级低的。

// 创建一个实例，这时的超时时间为系统默认的 0
var instance = axios.create();

// 通过instance.defaults重新设置超时时间为2.5s，因为优先级比系统默认高
instance.defaults.timeout = 2500;

// 通过request config重新设置超时时间为5s，因为优先级比instance.defaults和系统默认都高
instance.get('/longRequest', {
  timeout: 5000
});

其他配置

// `auth'表示应该使用 HTTP 基本认证，并提供凭据。
// 这将设置一个`Authorization'头，覆盖任何现有的`Authorization'自定义头，使用`headers`设置。
auth: {
username: 'janedoe',
password: 's00pers3cret'
},

更多配置参考： github.com/axios/axios

使用

引入对应的axios

import axios from './axios.js'

export const getData = () => {
  return axios.get('url')
}

axios的处理链流程拦截器简单使用

总结

参考

github.com/axios/axios