axios???????????????????????????

Posted 2020-11-18

???????????????   image   nod   ??????   ??????   charset   use   case   UNC   

axios ??????????????????Promise?????????????????????????????????????????? xhr????????????ajax????????????node?????????????????? http ????????????????????????

axios ?????????????????????????????????????????????????????????????????????????????????????????????

???????????????????????? vue ??????????????????????????????????????????????????? vue-cli???

???????????? axios ??????

???????????????????????? axios ????????????????????? axios ??????????????????????????????????????????????????????????????????????????????????????????????????????

const isDev = process.env.NODE_ENV === ???development???;

const instance = axios.create({
  // baseURL??????proxyTable???????????????????????????????????????????????????????????????????????????????????????????????????url????????????
  baseURL: isDev ? ???/fakeapi??? : ???/api???,
  timeout: 5000,

  validateStatus(status) {
    // ???????????????http status???200-300???????????????????????????????????????????????????????????????????????????(???????????????)
    return status === 200
  },
  headers: {
    // ?????? post ??????????????????
    post: {
      ???Content-Type???: ???application/x-www-form-urlencoded;charset=UTF-8???
    }
  }
});

??????????????????

??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

qs.stringify ???????????????????????????????????? qs.js - ???????????????url??????

import Qs from ???qs???;

instance.interceptors.request.use(config => {
    // ?????????????????????????????????token???????????????
    config.data = Qs.stringify(config.data, {arrayFormat: ???repeat???, allowDots: true});
    return config;
}, err => {
    return Promise.reject(err);
});

???????????????

import httpErrorHandler from ???./httpErrorHandler.js???;

instance.interceptors.response.use(function(data) {
    // ??????????????????????????????????????????????????????code?????????1???
    return data.data;
}, httpErrorHandler)

httpErrorHandler.js ??????

# httpErrorHandler.js

export default (error) => {
  if (!error.response) {
    return Promise.reject({
        msg: ????????????????????????,
        error
    });
  };

  let msg = ??????;
  const status = error.response.status;

  switch (status) {
    case 400:
        msg = ???????????????????????????;
        break;
    case 401:
        msg = ???????????????????????????;
        break;
    case 403:
        msg = ???????????????;
        break;
    case 404:
        msg = ???????????????????????????;
        break;
    case 500:
    case 501:
    case 502:
    case 503:
    case 504:
        msg = ?????????????????????;
        break;
    default:
        msg = ?????????????????? + status;
  }
  return Promise.reject({
      msg,
      error
  });
}

?????? get ??????

??? jquery.ajax ?????????axios???get?????????????????? prarms ????????? data???????????????

/**
 * ????????????axios get??????
 *
 * @param {string} url ????????????
 * @param {object} option ????????????
 * @param {object} [config] ???????????????????????????
 * @returns
 */
export function get(url, option, config = {}) {
  return instance.get(url, { params: option }, config)
}

// ??????get
get(???http://baidu.com???, {
    a: 1,
    b: 2
})
.then(...)
.catch(...)

post ??????

post???????????????????????????????????????????????? prarms ??????

/**
 * ????????????axios post??????
 *
 * @param {string} url ????????????
 * @param {object} option ????????????
 * @param {object} [config] ???????????????????????????
 * @returns
 */
export function get(url, option, config = {}) {
  return instance.get(url, option, config)
}

// ??????post
post(???http://baidu.com???, {
    a: 1,
    b: 2
})
.then(...)
.catch(...)

upload ??????

?????????????????????????????????header???????????????????????????????????????????????????????????????

const uploadInstance = axios.create({
  baseURL: isDev ? ???/fakeapi??? : ???/api???,
  timeout: 15000,
  headers: {
    // ?????????????????????????????????
    ???Content-Type???: ???multipart/form-data???
  }
});

/**
 * ????????????axios upload??????
 *
 * @param {string} url ????????????
 * @param {formdata} formdata ????????????, ?????????formdata??????
 * @param {object} [config] ???????????????????????????
 * @returns
 */
export function upload(url, formdata, config = {}) {
  return uploadInstance.post(url, formdata, config)
}

# ????????????
let formData = new FormData();
formData.append("image", file);
formData.append("name", ???name???);
upload(???http://baidu.com???, formData, {
    onUploadProgress(progressEvent) {
        // ?????????????????????
    }
})