axios拦截器+mockjs
Posted 风流倜傥任潇洒, 不负青春好年华。
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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; });
以上是关于axios拦截器+mockjs的主要内容,如果未能解决你的问题,请参考以下文章