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.本期的分享到了这里就结束啦,但愿对你有所帮助,让咱们一块儿努力走向巅峰。