axios拦截器+mockjs

//main.js中

//引入你mock.js文件
require(‘./mock.js‘)

//封装api请求
//src/axios/api.js

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

axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘

// 请求拦截器
axios.interceptors.request.use(function(config) {
return config;
}, function(error) {
return Promise.reject(error);
})
// 响应拦截器
axios.interceptors.response.use(function(response) {
return response;
}, function(error) {
return Promise.reject(error);
})

// 封装axios的post请求
export function fetch(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response.data);
})
.catch((error) => {
reject(error);
})
})
}

export default {
JH_news(url, params) {
return fetch(url, params);
}
}

//src/mock.js

//mock.js

// 引入mockjs
const Mock = require(‘mockjs‘);
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function() {
let articles = [];
for (let i = 0; i < 100; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage(‘300x250‘, ‘mock的图片‘), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ‘ ‘ + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
}
articles.push(newArticleObject)
}

return {
articles: articles
}
}

// Mock.mock( url, post/get , 返回的数据);
Mock.mock(‘/news/index‘, ‘post‘, produceNewsData);

//使用 组件
import api from ‘./../axios/api.js‘

api.JH_news(‘/news/index‘, ‘type=top&key=123456‘)
.then(res => {
console.log(res);
this.newsListShow = res.articles;
});

原文地址:https://www.cnblogs.com/lwj820876312/p/9095810.html

时间: 2024-10-04 21:47:58

axios拦截器+mockjs的相关文章

Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2.具体需求 用户鉴权与重定向:使用Vue提供的路由导航钩子 请求数据序列化:使用axios提供的请求拦截器 接口报错信息处理:使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js,这里是部分代码 import

Axios拦截器配置

Axios 拦截器的配置如下 分三块:基础配置.请求之前拦截.响应之前拦截 发送所有请求之前和操作服务器响应数据之前对这种情况过滤. http request 请求拦截器 每次发送请求之前判断是否存在 此时要是验证符合条件则通过,否则不符合的不给通过 具体代码如下: html文件 option2.php文件 因为博客园不支持上传js文件 只能截图了 至此,就可以看到结果了,就可以看到控制台的打印信息 原文地址:https://www.cnblogs.com/ddlove/p/9957087.ht

vue导航守卫和axios拦截器的区别

在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时触发) 我们主要介绍的是可以验证用户登录状态的全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中. const router = new VueRouter({ ... }) router.beforeEach(

axios拦截器?

// 引入axios以及element ui中的loading和message组件 import axios from 'axios' import { Loading, Message } from 'element-ui' // 超时时间 axios.defaults.timeout = 5000 // http请求拦截器 var loadinginstace axios.interceptors.request.use(config => {  // element ui Loading方

axios拦截器

import axios from "axios"; axios.interceptors.response.use(response => { //=>设置响应拦截器,在AJAX请求成功,执行对应方法之前,把从服务器获取的RESULT(包含了响应主体和响应头等很多信息)中的DATA获取到然后返回,这样在请求成功执行的函数中,再次遇到的RESULT只有响应主体内容 return response.data; }); export{ axios } 没设置之前 返回的data

axios拦截器使用方法

vue中axios获取后端接口数据有时候需要在请求开始时显示loading,请求结束后隐藏loading,这时候到每次调接口时都写上有点繁琐,有时候还会漏写. 这时候axios的拦截器就起了作用,我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤.定义拦截器如下: import Vue from 'vue' import axios from 'axios' import { Indicator } from 'mint-ui' import { Toast } from 'min

vue axios 拦截器

前言 项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断. 第一次使用拦截器,文章中如有不对的地方还请各位大佬帮忙指正谢谢. 正文 axios的拦截器分为请求拦截器和响应拦截器两种.我一般把拦截器写在main.js里. mian.js//axios请求 import Axios from "axios"; Vue.prototype.$axios = Axios; 请求拦截器 axios.interceptors.request.use(

axios 拦截器

1,在请求或响应被 then 或 catch 处理前拦截它们 // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axios.interceptors.response.use(function (respo

vue下axios拦截器token刷新机制

//创建http.js文件,以下是具体代码: //引入安装的axios插件 import axios from 'axios' import router from '@/router'; import Vue from 'vue' const qs = require("qs"); let _this = new Vue(); let isLock = false; let refreshSubscribers = []; //判断token是否过期 function isToken