码迷,mamicode.com
首页 > 移动开发 > 详细

vue+axios 拦截器及使用

时间:2021-03-04 13:30:53      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:local   com   xxxxx   sage   clu   move   col   rom   cal   

axios是一个就promise的HTTP库,可以用在浏览器和node.js中

main.js

import Vue from ‘vue‘
import axios from ‘axios‘

// 使用拦截器
// 添加请求拦截器 axios.interceptors.response.use( response
=> {
     // 在发送请求之前做些什么
if (response.data.code && response.data.code === 401) { router.push({ path: ‘/login‘, }) Vue.prototype.$message.error("登录超时!"); } if (response.data && response.data.code && response.data.code !== 200) { Vue.prototype.$message.error(response.data.msg) } return response }, error => {
     // 对请求错误做些什么 let errorStatus
= [401, 403] if (errorStatus.includes(error.response.status)) { local.remove(‘loginToken‘) router.push({ path: ‘/login‘, }) Vue.prototype.$message.error("登录超时!"); } else { Message({ message: error.message, type: ‘error‘, duration: 5 * 1000 }) return Promise.reject(error) } return error } ); // 添加响应拦截器 axios.interceptors.request.use( config => {
     
// 对响应数据做点什么 // 判断是否存在token,如果存在的话,则每个http header都加上token let token = local.get(‘loginToken‘) let conheaders = config.headers.common if (!Object.prototype.hasOwnProperty.call(conheaders, ‘loginToken‘) && token) { conheaders["X-Admin-Token"] = token } return config; }, error => {
     // 对响应错误做点什么
return Promise.reject(error); });

调用axios

api.js

import axios from ‘axios‘

const baseUrl="https://xxxxxx"

export const test= (param) => {     
    return axios.request({
        method: ‘post/put/delete‘,
        url: baseUrl + ‘/test/list‘,
        data: param
    })
};

export const test2= (param) => {     
    return axios.request({
        method: ‘get‘,
        url: baseUrl  + ‘/test2/get/‘ + param,
    })
};

使用的时候

test.vue

<script>
import {test} from "./api.js"
import Swal from "sweetalert2";
export default {
    data(){
        return{}
    },
    create:function(){
        this.testFun()
    },
    metiods:{
         testFun(){
           let params={}
           test(params)
             .then(res=>{console.log(res.data)})  
             .catch(reeor=>{Swal.fire("错误", error.toLocaleString(), "error");})
    }
</script>

 

vue+axios 拦截器及使用

标签:local   com   xxxxx   sage   clu   move   col   rom   cal   

原文地址:https://www.cnblogs.com/yieix/p/14478675.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!