axios请求二次封装

这里我们以vue项目为例
其他项目也是一样的
npm install axios --save 在项目中引入 axios第三方插件
在项目src目录下创建 utils文件夹
在utils下创建request.js
request.js参考代码如下

import axios from 'axios';

//在vue原型链中封装post请求方法
function createService () {
    // 创建一个 axios 实例
    const service = axios.create()
    // 请求拦截
    service.interceptors.request.use(
        //发送成功
        config => {
            //可在此配置请求头信息
            config.headers.Authorization = `Bearer ${登录时获取的用户token}`;
            return config
        },
        //发送失败
        error => {
            return error
        }
    )
    //响应拦截
    service.interceptors.response.use(
        //请求成功
        response => {
             //抛出返回值
             return response;
        },
        //请求失败
        (error, response) => {
            //返回错误信息
            return error;
        }
    )
    //抛出对象
    return service
}

function createRequestFunction (service) {
    return function (config) {
     const configDefault = {
     headers: {
        Authorization: `Bearer ${登录时获取的用户token}`,
        'Content-Type':'application/json'
     },
     timeout: 100000,
     baseURL: "http://192.168.0.99:8084/",
     data: {}
   }
   return service(Object.assign(configDefault, config))
 }
}

const service = createService()
export const request = createRequestFunction(service);

这个 登录时获取的用户token大家千万不要无脑复制 token相信大家也都了解如果不了解可以去查一下
然后我们 要调用他分为两步
第一步是要在src项目下创建api文件夹
然后在api文件夹中编写对应模块的调用接口的js文件
例如我们要开发视图功能 就代理名为 view
在api下创建viewApi.js
参考代码如下

import {request} from '@/utils/request'

export function gettoken(params){
    return request({
        url:`请求地址`,
        method:'get',
        params:params,
    })
}

这里我们就写了一个调用get请求的方法

然后在vue文件中先 引入viewApi.js

import {gettoken} from '@/api/viewApi.js'

然后调用方法即可

gettoken(请求参数).then(res => {
   console.log(res);
})