关于axios:axios模块化封装

1.开发环境 vuecli4
2.电脑系统 winodws10专业版
3.在开发的过程中,咱们会进行数据的申请,我应用的是axios,上面我来分享一下我本人的封装配置,心愿对你有所帮忙。
4.废话不多说,间接上操作:

// 装置 
npm i axios --save

5.在src目录下进行文件夹 network(网络的意思),目录构造如下:

文件目录阐明:
api:对立治理接口
https:axios申请封装

6.第一版https.js问价代码如下:

import axios from 'axios'
import qs from "qs"

/* 个别都是应用全局配置,在此我是通过创立实例的办法,长处:当接口不在一个服务器上,咱们能够通过这种创立实例的办法方便管理和应用 */
// // 第一种写法
const http1 = (config, success, failure) => {
  const instance = axios.create({
    // baseURL: 'http://192.168.1.115:3000',
    timeout: 5000,
  })

  instance(config).then(res => {
    // console.log(res);
    success(res);
  }).catch(err => {
    // console.log(err);
    failure(err);
  })
}


export default {
  http1,
}

//在对应的vue模板中应用
this.$https.http1(
{
  url: '/api/api/login',
  method: 'post',
},
(res) => {
  console.log('申请胜利');
  console.log(res);
}
);

7.第二版https.js问价代码如下:

import axios from 'axios'
import qs from "qs"

/* 个别都是应用全局配置,在此我是通过创立实例的办法,长处:当接口不在一个服务器上,咱们能够通过这种创立实例的办法方便管理和应用 */
// // 第二种写法
const http1 = (config) => {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      // baseURL: 'http://192.168.1.115:3000',
      timeout: 5000,
    })

    instance(config).then(res => {
      resolve(res);
    }).catch(err => {
      reject(err);
    })
  })
}


export default {
  http1,
}

//在对应的vue模板中应用
this.$https.http1({
 url: '/api/api/login',
 method: 'post',
 })
.then((res) => {
 console.log('申请胜利啦');
 console.log(res);
});

8.第三版https.js问价代码如下:

import axios from 'axios'
import qs from "qs"

/* 个别都是应用全局配置,在此我是通过创立实例的办法,长处:当接口不在一个服务器上,咱们能够通过这种创立实例的办法方便管理和应用 */
// // 第二种写法
const http1 = (config) => {
  const instance = axios.create({
    // baseURL: 'http://192.168.1.115:3000',
    timeout: 5000,
  })
  
   // 间接 return 
  return instance(config);
  /* 
  为什么能够这样写?因为axios 自身的返回值就是 Promise

  */
}

export default {
  http1,
}

//在vue组件应用办法和计划二是一样的

9.拦截器:

/* 
拦截器分为:
申请胜利拦挡
申请失败拦挡
响应胜利拦挡
响应失败拦挡
*/

//咱们能够给实例增加拦截器也能够给全局增加拦截器

10.全局拦截器:

//申请拦挡
axios.interceptors.request.use((config) => {
  // console.log("全局申请拦挡胜利啦");
  // console.log(config);
  return config;
}, (err) => {
  // console.log("全局拦挡失败啦");
  console.log(err);
})

//响应拦挡:
axios.interceptors.response.use((res) => {
  //响应拦挡胜利
  console.log("响应拦挡胜利");
  console.log(res);
  // console.log(res.data);
  return res;
  // 留神:在这里要把(想要的数据)返回
}, (err) => {
  console.log("响应拦挡失败");
  console.log(err);
})

11.申请办法封装:

//全局申请办法
// // 封装axios的post申请
const post = (url, params) => {
  return new Promise((resolve, reject) => {
    axios
      .post(url, qs.stringify(params))
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
};

// 封装axios的put申请
const put = (url, params) => {
  return new Promise((resolve, reject) => {
    axios
      .put(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
};

// 封装axios的delete申请
const del = (url, params) => {
  return new Promise((resolve, reject) => {
    axios
      .delete(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
};
const get = (url, query) => {
  return axios.get(url, query);
};

const $axios = {
  post: post,
  get: get,
  put: put,
  delete: del
};

//实例申请办法能够写在实例外面,办法雷同

12.api.js代码:

/* 
对立接口治理,我的项目中有很多接口,咱们在进行一些操作的时候时候在不同的文件会调用很多雷同的接口,如果接口产生了变动,批改接口就成了一个很被动的,而且消耗大量的工夫。
*/
import https from '@/network/https.js';

//实例办法调用
// export default function clogin() {
//   return https.http1().post('/api/api/login');
// }

// let clogin = () => {
//  return https.http1().post('/api/api/login');
// }

let clogin = () => {
  return https.$axios.post('/api/api/login');
}

export {
  clogin
}

13.在对应的vue模板中应用:

import { clogin } from '../network/api.js';
// import { clogin } from '@/network/api.js';

//在对应的办法中应用
clogin().then((res) => {
 console.log('申请胜利啦');
 console.log(res);
})
.catch((err) => {
 console.log('申请失败啦');
 console.log(err);
});

14.get申请传参:

let aa = {
 a: '222',
 b: '999',
};

clogin({ params: aa }).then((res) => {
 console.log('申请胜利啦');
 console.log(res);
})
.catch((err) => {
  console.log('申请失败啦');
console.log(err);
});

15.post申请传参:

let aa = {
 a: '222',
 b: '999',
};

clogin(aa).then((res) => {
 console.log('申请胜利啦');
 console.log(res);
})
.catch((err) => {
 console.log('申请失败啦');
 console.log(err);
});

16.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。