Vue项目中如何封装axios以及API(详细步骤）

浅浅的花香味﹌ 2022-11-19 01:26 144阅读 0赞

### 首先需要封装axios ###

1.在src路径下创建utils文件夹，然后创建require.js  
![在这里插入图片描述][20210414083107668.png]  
2.require.js代码如下,**（按需求更改）**

//1. 导入axios对象
    import axios from "axios";
    //2. 创建对象实例，create方法
    const Server = axios.create({
        //请求接口的基础地址
        baseURL: 'http://39.100.7.70:81/', 
        //设置超时时间
        timeout: 4000 
    })
    
    // 请求拦截器
    Server.interceptors.request.use(config => {
    
        // 给管理后台的接口设置header头，添加Authorzation属性
        let token = sessionStorage.getItem('token')
        config.headers['Authorization'] = token//给header头添加token值
    
        return config
    }, error => {
        // 出现异常
        return Promise.reject(error);
    })
    
    // 响应拦截器
    Server.interceptors.response.use(response =>{
    
        // 后台正常响应的状态，如果是200， 说明后台处理没有问题
       /*  if (response.status == 200) {
            return response.data;
        } */
        // return response.data 可以在这里统一的获取后台响应的数据进行返回，而这里面就没有请求头那些
        return response
    }, error => {
        return Promise.reject(error);
    })
    
    
    export default Server // 导出自定义创建 axios 对象

3.在main.js中，写入以下代码

import axios from '../src/utils/require'
    Vue.prototype.$http = axios;

4.开始封装api，在src路径下创建一个API文件夹，创建一个api(可以自己写名).js，操作如下  
![在这里插入图片描述][20210414083658784.png]  
5.然后在detail.js中，写入以下代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70]  
6.在页面中应用  
（1.导入detail.js 这个api）  
![在这里插入图片描述][2021041409012477.png]  
应用api  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70 1]

[20210414083107668.png]: /images/20221022/9ad1d34b0d7c4b57803f5ba8ed38ade2.png
[20210414083658784.png]: /images/20221022/353625a2148f4f20a9cb81fd7a893faf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70]: /images/20221022/55686dcdfbf64204a6a243edfa598d81.png
[2021041409012477.png]: /images/20221022/7f4760e4fb6f4437a5f0683f7099a9f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfaGFpX3lhbg_size_16_color_FFFFFF_t_70 1]: /images/20221022/60169e911394428c81ca015541a85055.png