JS-axios的二次封装

axios的二次封装

项目中axios的二次封装

拿Vue项目举例，下面说说axios的二次封装步骤，那么就火速说一下怎么封！

1. 导

有兄弟会问一上来就导，不太合适吧，我觉得正合适！

//必是要先导入我们的axios
import axios from 'axios'

如果有好兄弟导不出来，可能是没装axios的依赖，可以执行下面的语句在你的终端

npm install axios

2.建

新建一个axios实例

const instance = axios.create({
	baseURL:"服务端IP"
})

3.拦

拦，也就是我们二次封装的重点，分成请求拦截器和响应拦截器

请求拦截器

instance.interceptors.request.use(function(config){
	return config;
},function(error){
	return Promise.reject(error);
})

大概就这么回事，interceptors翻译过来就是拦截的意思，然后我们需要在发送请求之前给他拦住，做一些必须的处理，因为所有请求发送之前我们都需要经过拦截器，有时候一些功能是不是得判断用户是否登录？是否有token？因此在这里就可以加token或者其他处理，config参数里就是一些我们发送请求的参数。

响应拦截器

instance.interceptors.response.use(function(response){
	return response
},function(error){
	return Promise.reject(error)
})

可以看出来和请求拦截器基本一致，我们可以对response进行处理，返回满足需求的数据

4.出

最后，我们得把我们辛辛苦苦封装的instance导出去，供大伙使用

export default instance;

axios的基本使用

以下内容与二次封装无关，一些补充知识，大伙乐意看可以看看

axios.get()

//第一种：
axios.get("api地址，如果有参数就api?params=...&...")
.then((res)=>{
	console.log(res)
})
.catch((err)=>{
	console.log(err)
})
//第二种：
axios.get('api地址', {
   params: {
     xx: xxxx
   }
 })
 .then(function (res) {
   console.log(res);
 })
 .catch(function (err) {
   console.log(err);
 });

axios.post()

axios.post('api地址')
	 .then(function(res){console.log(res)})
	 .catch(function (err) { // 请求失败处理
		console.log(err);
 });

axiosApi

axios({
  method: 'post',
  url: 'api地址',
  data: {
    xx: 'xxx',
    xxxx: 'xxxxx'
  }
});