axios常用操作

一：函數化編程

1:編寫可復用的方法

axios(config)的方法中，有必須的url參數和非必須的options參數。所以我們可以先寫一個接受這兩個參數的方法，在這個方法中我們可以添加一些業務化的代碼，例如修改headers中的一些參數。

function request(url, options) {
  const defaultOptions = {
    credentials: 'include',
  };
  const newOptions = { ...defaultOptions, ...options };
  newOptions.headers = {
    ...newOptions.headers,
  };
  if (newOptions.method === 'POST' || newOptions.method === 'PUT') {
    newOptions.headers = {
      Accept: 'application/json',
      'Content-Type': 'application/json; charset=utf-8',
      ...newOptions.headers,
    };
    newOptions.data = JSON.stringify(newOptions.data);
  }

  return axios({ url, ...newOptions })
    .then(checkStatus)
    .then((response) => {
      return response.data;
    })
    .catch((e) => {
      if (status === 403) {
        // 跳轉
      }
    });
}

export default request;

然后我們在services文件中調用這個方法：

export async function api() {
  return request('/aa/bb');
}

export async function api2(params) {
  return request('/aa/cc', {
    method: 'PUT',
    data: params,
  });
}

　　

 

二：攔截

1：如何在axios攔截時修改headers中的值(例如多語言)

axios.interceptors.request.use(
  (config) => {
    const config2 = config;
    config2.timeout = 30000; //eslint-disable-line
    config2.headers['Accept-language'] = 'USSSSS';
    return config2;
  },
  (error) => {
    // Do something with request error
    return Promise.reject(error);
  }
);

如果這里直接操作config會報 no-param-reassign （eslint）的錯誤。