개발 중인 axios

3469 단어
[axios npm 주소]https://www.npmjs.com/package/vue-axios
일상 설치
npm install --save axios vue-axios는main.js중
```import axios from 'axios'
```import VueAxios from 'vue-axios'
 
```Vue.use(VueAxios, axios)
-----------------------------------------------------------------
####     ,          axios      ,  axios   ,     axiosConfig.js
import axios from 'axios';
import Message from ''
import QS from 'qs';     //axios        ,       

const instance = axios.create({
  baseURL: process.env.API_ROOT,
  timeout: 3000,
});
instance.defaults.withCredentials = true;
const pending = []; //             ajax        ajax  
const cancelToken = axios.CancelToken;
const removePending = (config) => {
  for (const p in pending) {
    if (pending[p].u === `${config.url}&${config.method}`) { //                  
      pending[p].f(); //       
      pending.splice(p, 1); //            
    }
  }
};

//        
axios.interceptors.request.use((config) => {
  removePending(config); //    ajax           
  config.cancelToken = new cancelToken((c) => {
    //               
    pending.push({ u: `${config.url}&${config.method}`, f: c });
  });
  return config;
}, error => Promise.reject(error));

instance.interceptors.response.use(
  (res) => {
    let R = null;
    //               ,            
    if (res.status === 200) {
      const {
        data: {
          data: resData, success = false, errorCode = '', errorMsg = '',
        },
      } = res;
     //true   resolve,false reject
      if (success) {
        R = resData;
        return Promise.resolve(R);
      }
      R = [errorCode, errorMsg];
      return Promise.reject(R);
    }
    return `error${res}`;
  },
  (error) => {
    Message.error({
      message: error.message || '    ',
    });
    if (error.response) {
      return Promise.reject(error.response.data);
    }
    return Promise.reject([-1, '    ']);
  },
);

export default {
  get(url, params) {
    return new Promise((resolve, reject) => {
      instance.get(url, { params })
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          console.error(`GET  url(${url})  ,    :`);
          console.error(err);
          reject(err);
        });
    });
  },
  //   post  
  post(url, params = {}) {
    return new Promise((resolve, reject) => {
      // console.debug('post params=',params);
      instance.post(url, QS.stringify({ ...params }))
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  //       
  postJson(url, params) {
    return new Promise((resolve, reject) => {
      instance.post(url, params, { headers: { 'Content-Type': 'application/json' } })
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
  postFile(url, formData) {
    return new Promise((resolve, reject) => {
      instance.post(url, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          console.error(`POST  url(${url})  ,    :`);
          console.error(err);
          reject(err);
        });
    });
  },
};

좋은 웹페이지 즐겨찾기