vue 封装propmise 第一种

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

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;
      });