Axios的默認配置（碎片知識）API

axios API

axios(config)

axios({
   method: 'Post',
   url: '/user/123',
   data: {
    //略
   }  
})

axios(url[, config])

//默認發送一個GET request
axios('/user/123');

 

 

Request method aliases

別名，提供所有請求方法

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

例子：

axios.get('/user?id=123')
.then(response => {
   //handle success
})
.catch(err => {
  //handle error
})
.then(() =>{
// always executed
});

 

還可以：axios.get(url, config)

axios.get('/user', { paramis: { id: 123, } })
.then().catch().then();

 

甚至可以用ES2017:

async function getUser() {
  try{
     onst response = await axios.get('/user?id=123');
     console.log(response)
  }  catch (error) {
     console.error(error)  
  }
}

 

 

並發Concurrency

幫助函數處理並發請求。

axios.all(iterable)

axios.spread(callback)

function getUserAccount() {
  return axios.get('/user/123')  
}

function getUserPermissions() {
  return axios.get('/user/123/permisssions')  
}

axios.all([getUserAccount(), getUserPermissions()])
    .then(axios.spread(function(acct, perms) {
        //2個請求都完成后，執行這里的代碼
     }))

  

創建一個實例用於客制化config

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
})

 

實例方法：

request, get, head,options, post, put, patch, getUri([config])

 

Request Config

常用配置：（全面的配置見git）

{
  url: ''/user',

  methods: 'get',

  //baseURL會放到url前面，除非url是全的url。
  //對axios的實例傳遞相對URl，使用baseURL會更方便。
  baseURL: 'https://some-domain.com/api/',

  //在請求數據被發送到服務器前改變要發送的data
  //只能用於put, post, pathc請求方法
  //在數組中的最后一個函數必須返回一個string, 或者一個實例(FormData, Stream, Buffer, ArrayBuffer)
  //也可以修改header對象。
  transformRequest: [function(data, headers) { 
    //寫要改變數據的代碼
    return data
  }]
 //當響應數據返回后，在它傳入then/catch之前修改它
  transformResponse: [function(data) { //...; return data; }]
 //客制
  header: {...},

  params: {
    id: 123;
  },
 //要發送的請求body， 只用在put ,post, patch.
  data: { //...}
 //如果請求時間超過timeout，則終止這個請求。
  timeout: 1000,
  
}

 

 

ResponseConfig 

{
  data: {},
  status: 200,
  statusText: 'ok',

  //服務器響應的headers  
  headers: {},

  //由axios提供的配置，用於request
  config: {},
  //
  request: {},
}    

 

 

Config Defaults

指定默認的配置，用於每個請求。

全局

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

 

實例默認配置：

//當創建實例時，設置默認配置。
const instance = axios.create({
   baseURL: 'https://api.example.com' 
})

//選擇默認
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

 

Config order of precedence

實例的默認配置，可以修改。

//此時默認timeout是0
const instance = axions.create()
//改變設置實例的的配置。
instance.defaults.timeout = 2500;

當使用這個實例發送請求時，還可以改變實例的默認配置。

instance.get('/longRequest', {
  timeout: 5000
})

 

Interceptors

在它們被then.catch處理之前,攔截請求或者響應.

axios.interceptors.request.use(
  function(config) {
    //在請求發送前，執行這里的代碼
    return config;
  }, 
  function(error) {
    //do sth with request error
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  function(response) {
    //在接收響應數據前，執行這里的代碼
    return response;
  },
  function(error) {
    //do sth with response error
    return Promise.reject(error)
  }
);

 

真實例子：

<script>
  export default {
  //...略data函數和methods對象
  created() {
    // 增加一個響應攔截。
    // 這個攔截，不處理function(response),所以用undefined
    // 只對返回錯誤狀態碼401，作出設置。
    this.$http.interceptors.response.use(undefined, function(err){ return new Promise(function(resolve, reject) {
        if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
          this.$store.dispatch(logout)
        }
        throw err;
      })
    })
  }

 

 

如果之后需要移除interceptor使用eject().

interceptor也可以用於custom instance of axios.

 

Cancellation

可以使用a cancel token來取消一個請求。（具體見git）

 

Using application/x-www-form-urlencoded format

默認，axios serializes  JavaScript對象成JSON格式。

並使用application/x-www-form-urlencoded format 。

你也可以使用其他方式：

Browser

Node.js

TypeScript。