关于vue.js:axios模块化封装

68次阅读

共计 3727 个字符，预计需要花费 10 分钟才能阅读完成。

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);
})

// 留神: 这个响应的拦截器 res 的输入是这样的

// 在这里咱们能够返回 res.data, 失去的后果就是后盾返回给咱们的数据, 如下:

// 留神: 也能够在对应的申请办法中
resolve(response.data); // 来实现,
// 倡议在响应拦挡中进行解决, 划分申请

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. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。

正文完