vue 封装propmise 第一种 -----axios封装---api资源管理

Posted 2021-07-08 fengshaopu

一、步骤
1.创建文件夹，下面有二个js文件
2.http导入axios、router、store、vant里面的 弹框
3.设置基地址跟请求拦截器、响应拦截器
4.在另一个js中导入配置请求方式导入
5.使用

面试题：
去哪里的项目是我独立开发的，里面用到了vue的技术栈，vue的话用axios
，axios是分装了原生的xhr，我们为什么要封装axios，因为vue的项目如果成千上万我们总不能一直是axios.get(),axios.post()
所以我们要分装axios，我们要在axios分装里面导入axios、router、store、vant ，并且设置基地址跟超时时间
请求拦截器里
router是用于当登录失败的时候重新定义路由
store 是用于给axios请求时herader头携带token的
vant 是在请求拦截器里面，使用loading效果，在响应拦截器里面关闭loading
我们在请求拦截器的配置由于是配置我写了一篇博客，
然后在api资源统一管理，导入封装好的axios，导入px，在这里面设置所有请求的方法，然后在导出 然后在组件中导入，然后使用

1.创建文件夹，在src下面创建二个js文件

2.http导入axios、router、store、vant里面的 弹框

import axios from 'axios'
import router from '../router'
import store from '../store'
import { Toast } from 'vant'

3.设置基地址跟请求拦截器、响应拦截器

const service = axios.create({ 
    baseURL: './mock', // url = base api url + request url       //基地址
    withCredentials: true, // send cookies when cross-domain requests
    timeout: 5000 // request timeout
})


// post请求头
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';



// request 拦截器 request interceptor
service.interceptors.request.use(
    config => {
        // 不传递默认开启loading
        if (!config.hideloading) {
            // loading
            Toast.loading({
                forbidClick: false
            })
        }
        if (store.getters.token) {
            config.headers['X-Token'] = ''
        }
        return config
    },
    error => {
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
    }
)


// 响应拦截器
service.interceptors.response.use(
    response => {
    Toast.clear();

        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服务器状态码不是200的情况    
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登录                
                // 未登录则跳转登录页面，并携带当前页面的路径                
                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                case 401:
                    router.replace({
                        path: '/login',
                        query: { redirect: router.currentRoute.fullPath }
                    });
                    break;
                // 403 token过期                
                // 登录过期对用户进行提示                
                // 清除本地token和清空vuex中token对象                
                // 跳转登录页面                
                case 403:
                    Toast({
                        message: '登录过期，请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token                    
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                    setTimeout(() => {
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                    break;
                // 404请求不存在                
                case 404:
                    Toast({
                        message: '网络请求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                // 其他错误，直接抛出错误提示                
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }
)

export default service

4.在另一个js中导入配置请求方式导入

import require from './http.js'
import qs from 'qs' //根据需求是否导入qs模块
 
let obj={
    list(){
        return require({
            url:'/index.json',
            methods:'get',
            params:{}
        })
    }
} 

export default  obj

5.使用

import obj from "@/require/api";
    obj.list().then(res => {
        console.log(res);
        this.index = res.data.data.swiperList;
        this.lunbo = res.data.data.iconList;
        this.gu = res.data.data.recommendList;
        this.weekendList = res.data.data.weekendList;
      });