Axios封装及使用

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

使用过 Ajax 的前端开发都知道，Ajax 可以进行 http 请求，而 Axios 则实现了对 ajax 的封装，只不过它是 Promise 的实现版本。

安装

npm install axios

配置

request 请求拦截

在请求时，可以统一配置请求数据，比如在请求头加入 token 信息。

先读取存入 localStorage 的 token 信息，然后配置在请求头。

axios.interceptors.request.use(
  config => {
    let tokenInfo = JSON.parse(localStorage.getItem('token'));
    let token = '';
    if (tokenInfo) {
      token = tokenInfo;
    }
    if (config.headers['Content-Type'] == 'multipart/form-data' || config.headers['Content-Type'] == 'arraybuffer') {
      config.headers = {
        'Authorization': token
      }
    } else {
      config.data = JSON.stringify(config.data)
      config.headers = {
        'Content-Type': 'application/json',
        'Authorization': token
      }
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

response 响应拦截

在请求后，可以对返回信息进行配置，针对特定状态码进行处理。

比如登录权限、或者登录状态失效问题，跳转登录页面。

axios.interceptors.response.use(
  response => {
    if (response.data.code == 1001 || response.data.code == 1002) {
      // 
      return;
    } else if (response.data.code == 401 || response.data.code == 405) {
      // logout()
      return Promise.reject(response);
    }
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 405:
        case 401:
          // logout() // 
          break;
        default:
          ;
          break;
      }
    }
    return Promise.reject(error)
  }
)

get、post、put、delete 统一封装

在 Vue 项目中，src 目录下新增 api 目录，添加 api.js

api.js

import router from '../router';
import store from '../store/index';
const _self = Vue.prototype


axios.defaults.timeout = 25000;
// 根据环境，定义基础域名
axios.defaults.baseURL = process.env.VUE_APP_API_URL 


//http request 拦截器
axios.interceptors.request.use(
  config => {
    let uinfo = JSON.parse(localStorage.getItem('ONLINE_USER'));
    let token = '';
    if (uinfo) {
      token = uinfo.token
    }
    if (config.headers['Content-Type'] == 'multipart/form-data' || config.headers['Content-Type'] == 'arraybuffer') {
      config.headers = {
        'token': token
      }
    } else {
      config.data = JSON.stringify(config.data)
      config.headers = {
        'Content-Type': 'application/json',
        'token': token
      }
    }
    // if(token){
    //   config.params = {'token':token}
    // }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);


//http response 拦截器
axios.interceptors.response.use(
  response => {
    if (response.data.code == 1001 || response.data.code == 1002) {
      //
      return;
    } else if (response.data.code == 401 || response.data.code == 405) {
      logout()
      return Promise.reject(response);
    }
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 405:
        case 401:
          logout()
          break;
        default:
          ;
          break;
      }
    }
    return Promise.reject(error)
  }
)

function logout() {
  // 登录注销操作
}

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params,
    }).then(response => {
      resolve(response.data);
    })
      .catch(err => {
        console.info(err);
        reject(err)
      })
  })
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}

/**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.patch(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}

/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.put(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}
/**
 * 文件上传
 * @param {*} url 
 * @param {*} data { file 文件对象}
 */
export function postFile(url, data = {
  file: {}
}) {
  return new Promise((resolve, reject) => {
    let formdata = new FormData()
    formdata.append('file', data.file)
    let config = {
      processData: true,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
    axios.post(url, formdata, config).then(response => {
      resolve(response.data);
    }, err => {
      reject(err)
    })
  })
}

/**
 * 封装delete请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function deleted(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.delete(url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}