axios封装 vue

整体分为两部分

-请求配置 请求拦截+响应拦截
-请求方法 post方法+get方法

第一部分 请求配置 封装原生的AXIOS 创建名为http.js

import axios from 'axios';
import Cookies from 'js-cookie';//根据需求,在决定需要不需要Cookie
//用于跳转页面
import router from '@/router/index.js';
// 创建一个新的实例
const instance = axios.create({
    baseURL: "配置需要引入的url",
    timeout: 30000//配置响应时间
});
//在新的实例instance上添加拦截器
//1.请求拦截  添加请求拦截器 一般用于在请求前添加token头
instance.interceptors.request.use(function(config) {
    // 在请求之前做些什么
    config.headers["token"] = Cookies.get("gy_token");//根据情况而定,进行token配置
    return config;
}, function(error) {
    //对请求错误做些什么
    return Promise.reject(error);
});

// 2.响应拦截
// 添加响应拦截器
instance.interceptors.response.use(async function(response) {
        if (response.data.msg == "请登录") {//根据后端返回错误来订制拦截
            router.push({
                path: "/"
            });
        }
        return response;
    },
    function(error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    });
export default instance;

第二部分 请求方法 引入请求配置 制定post/get请求方式 创建名为api.js

import http from './http.js';//将配置好的axios引入

const api = {
    myPOST(data) {//配置post 的方式
        return http({
            url: data.url,
            method: 'POST',
            data: data.data || {}
        })
    },
    myGET(data) {
        return http({//配置get 的方式
            url: data.url,
            method: 'GET',
            params: data.data || {}
        })
    },
}

export default api
后面在需要的页面引入api.js即可调用其中的请求方式
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容