vue + axios---封装一个http请求

Myth丶恋晨 2022-04-08 11:19 447阅读 0赞

在使用vue开发时，官方推荐使用axios来请求接口

如何实现一个axios HTTP请求库

  1. //    axios官方地址
  2. https://github.com/axios/axios

但是axios并不像 vue-resource 一样拥有install，即不能直接 Vue.use(axios) 来使用，所以需要我们自己根据axios来写一个具有install方法的Http库。

1.安装axios

  1. npm install axios

2.创建Http.js文件

  1. import axios from 'axios'
  3. export default {
  4.     install (Vue) {
  5.     //    install方法，向Vue实例中添加一个$http方法
  6.         Vue.prototype.$http = axios
  7.         Vue.$http = axios
  8.     },
  9.     $http: axios
  10. }
  12. export const Http = axios

3.引用

  1. import Vue from 'vue'
  2. import Http from './Http'
  4. Vue.use(http)

如此，就可以在vue中直接使用axios了

4.axios拦截器
在开发过程中，会需要设置一些请求头，公共参数等，或者需要对请求结果进行统一处理（例如错误处理），这时候就可以用到axios拦截器

创建interceptor.js文件

  1. import axios from 'axios'
  3. let interceptor = ''
  4. export const myInterceptor = interceptor
  6. //    设置请求拦截器
  7. export const setInterceptor = function (response) {
  8.     axios.interceptors.request.use((config) => {
  9.         config.headers.Authorization = token    //设置请求头Authorization
  10.         config.headers.Accept = 'application/json'    //设置请求头Accept 
  11.        /*
  12.            具体配置需要根据实际开发情况来配置
  13.        */
  14.         return config
  15.     })
  16. }
  17. //    移除请求拦截器
  18. export const clearInterceptor = function () {
  19.   axios.interceptors.request.eject(myInterceptor)
  20. }

ps：上例只示范了axios的请求拦截，回复拦截时同样的处理方式
ps：在interceptor中暴露myInterceptor、setInterceptor与clearInterceptor 的原因是方便随时取消与设置

5.设置axios默认请求地址

  1. axios.defaults.baseURL = 'http://172.0.0.1'

虽说几乎都是使用webpack代理的方式来配置请求地址，但此方式依然有时会用到

原文地址：https://segmentfault.com/a/1190000017352304

发表评论

表情：
评论列表 （有 0 条评论，447人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue-封装axios请求

    最近接手新的vue项目，发现axios竟然没有封装，立马动手封装，这里记录一下完整的封装过程，废话不说，直接上代码 baseConfig.js文件 //存放各个服

    超、凢脫俗超、凢脫俗/ 0 赞/ 111 阅读