axios的二次封装(详解)

一.对axios进行二次封装好处

1、代码封装，重用性高，减少代码量，减低维护难度。

2、统一处理一些常规的问题一劳永逸，如http错误。

3、拦截请求和响应，提前对数据进行处理，如获取token，修改配置项。

安装axios

npm下载

npm install axios

下载完成之后在main.js中全局引入

import axios from 'axios'
Vue.prototype.$axios = axios

在src下创建出一个新的文件夹 http

在http文件夹下创建一个新的api.js文件

//对axios进行二次封装,将刚才下载好的axios导入进来
import axios from "axios";
//2. 利用axios对象的方法create,去创建一个axios实例
//requests就是axios,只不过稍微配置一下
const api = axios.create({
    //基础路径
    baseURL: '', // 所有请求的公共地址部分
    timeout: 5000 // 请求超时时间,这里的意思是当请求时间超过5秒还未取得结果时,提示用户请求超时
})
 
// 请求拦截处理 请求拦截 在请求拦截中可以补充请求相关的配置
// interceptors axios的拦截器对象
api.interceptors.request.use(config => {
    // config 请求的所有信息
    // console.log(config);
    // 响应成功的返回
    return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行
}, err => {
    // 请求发生错误时的相关处理 抛出错误
    //响应失败的返回
    Promise.reject(err)
})
 
//响应拦截处理  响应拦截器：包含两个函数（一个是成功返回的函数，一个是失败的返回的函数）
api.interceptors.response.use(res => {
    // 我们一般在这里处理，请求成功后的错误状态码 例如状态码是500，404，403
    // res 是所有相应的信息
    console.log(res)
    return res.data
}, err => {
    // 服务器响应发生错误时的处理
    Promise.reject(err)
})
 
export default api

在http文件夹在创建一个 axios.js文件  用来封装请求接口

// 引入 封装的api 
import api from './api.js';
//下面是简写的形式
// getXXX 自定义的接口名字
export const getXXX = () => api.get('/getXXX');
 
// export const getBanner = (params) => api.get(`/apigb/v1/component`, { params})
// export const postBanner = (params) => api.post(`/apigb/v1/component/update-info`, params)

// // 下面是详细的写法
// export const xxxx = (params) => api({
//     url: '', // 请求地址
//     method: 'post', // 请求方式
//     // data: params, // (一般post请求，我们习惯使用 data属性来传参)
//     params: params //(一般get请求，我们习惯使用params属性来传参）
//     // 注意：data，和 params 两个属性传参使用，并不是固定的，也可以调换使用。
// })

最后就可以在组件中引入使用了 

//在使用的组建中载入
// banner 自定义接口的名字
import { banner } from "../http/axios.js";