axios拦截器
官方网址
http://www.axios-js.com/
简介:
封装axios:
Vue项目中/src/assets中创建文件-------axioshttp.vue
注意:
1、static中的文件,是不会经过编译的,打包后会生成dist文件夹,static中的文件只是复制一面。
因此,static中建议放一些外部第三方,自己的文件放在assets,别人的放在static中
2、若把图片放在assets和static中,html页面中都可以使用;
但是在动态绑定中,assets路径的图片会加载失败,
因为webpack使用的是 commenJS
规范,必须使用require才可以
代码如下:
import axios from “axios”
import qs from “querystring”
//创建axios实例:
var instance = axios.create({ timeout: 500 });
instance.defaults.headers.post["Content-Type"] = 'application/x-www-form-urlencoded';
// instance.defaults.headers.post["Authorization"]='localStorage.getItem("token")';//token在vuex
//请求错误函数 错误信息处理
const errorHandle = (status, other) => {
switch (status) {
case 400:
console.log("信息校验失败");
break
case 401:
//去登陆
toLogin();
console.log("认证失败");
break
case 403:
toLogin();
//token过时
//清除token储存
localStorage.removeItem("token");
console.log("token效验失败");
break
case 404:
console.log("请求资源不存在");
break
default:
console.log(other);
break
}
}
instance.interceptors.request.use(function (config) {
console.log(config);
//判断post请求需要增加qs转化
if (config.method === 'post') {
config.data = qs.stringify(config.data)
}
return config;
}, function (error) {
return Promise.reject(error)
})
instance.interceptors.response.use(
//请求成功
res => res.status === 200 ? Promise.resolve(res) : Promise.resolve(res),
//请求失败
error => {
const { response } = error;
if (response) {
errorHandle(response.status, response.data.message);
return Promise.reject(response);
} else {
console.log("断网了");
}
}
);
export default instance;
Vue项目中axioshttp.vue使用
配置代理:
在vue.config.js中配置:
module.exports = {
devServer :{
proxy: {
'/api': {
target: 'http://localhost:3005/',//需要跨域的目标url,
changeOrigin:true,//将基于名称的虚拟托管网站的选项,如果不配置,请求会报404
//是否重写
pathRewrite:{
// '^/api': ''
}
},
'/maoyan': {
target: 'http://m.maoyan.com/',
changeOrigin:true,
//是否重写
pathRewrite:{
'^/maoyan':''
}
}
}
}
}
json-server模拟数据
引用文章:https://www.cnblogs.com/fly_dragon/p/9150732.html
官方网址:https://www.npmjs.com/package/json-server
安装:
npm install -g json-server
使用
【Step1】首先准备一个json文件,如:db.json。
内容形如(db.json):
{
"data1": [{
"id": "001",
"name": "Sherry",
"age": 24,
"friends": [{
"id": "100",
"name": "friend1"
}, {
"id": "200",
"name": "friend2"
}]
}, {
"id": "002",
"name": "Addy",
"age": 26
}],
"data2": {
"id": "003",
"name": "Jack",
"age": 25
},
"data3": [{
"id": "004",
"name": "Rebeca",
"age": 27
}]
}
【Step2】使用全局json-server命令,启动mock服务。这个mock服务,管理的数据,就是db.json。
$ json-server --watch --port 3001 db.json
输出类似以下内容,说明启动成功。
jserver 的相关启动参数
参数 | 简写 | 默认值 | 说明 |
---|---|---|---|
–config | -c | 指定配置文件 | [默认值: “json-server.json”] |
–port | -p | 设置端口 | [ [默认值: 3000] Number] |
–host | -H | 设置域 [默认值: “0.0.0.0”] | String |
–watch | -w | Watch file(s) | 是否监听 |
–routes | -r | 指定自定义路由 | |
–middlewares | -m | 指定中间件 files | [数组] |
–static | -s | Set static files directory | 静态目录,类比:express的静态目录 |
–readonly | –ro | Allow only GET requests | [布尔] |
–nocors | –nc | Disable Cross-Origin Resource Sharing | [布尔] |
–no | gzip , --ng | Disable GZIP Content-Encoding | [布尔] |
–snapshots | -S | Set snapshots directory | [默认值: “.”] |
–delay | -d | Add delay to responses (ms) | |
–id | -i | Set database id property (e.g. _id) | [默认值: “id”] |
–foreignKeySuffix | – fks | Set foreign key suffix (e.g. _id as in post_id) | [默认值: “Id”] |
–help | -h | 显示帮助信息 | [布尔] |
–version | -v | 显示版本号 | [布尔] |
source可以是json文件或者js文件。实例:
$ json-server --watch -c ./jsonserver.json
$ json-server --watch app.js
$ json-server db.json
json-server --watch -port 8888 db.json
在vue项目package.json中配置使用
在终端使用:
npm run mock
在scripts下添加:
"mock": "json-server ./mock/mock.js -r ./mock/routes.json -p 3005"
创建mock文件夹如下:
cities.json,hotshowing.json为模拟的数据文件。
cities.json:
{
"hotCities": [
{
"id": 1,
"spell": "beijing",
"name": "北京"
},
{
"id": 3,
"spell": "shanghai",
"name": "上海"
},
{
"id": 47,
"spell": "xian",
"name": "西安"
},
{
"id": 239,
"spell": "sanya",
"name": "三亚"
},
{
"id": 188,
"spell": "lijiang",
"name": "丽江"
},
{
"id": 125,
"spell": "guilin",
"name": "桂林"
}
],
}
hotshowing.json:
{
"datalist": [
{
"id": 367835,
"haspromotionTag": false,
"img": "http://p1.meituan.net/w.h/movie/d3f2c33b95e10f54dc402de27bb4bdc11292214.jpg",
"version": "",
"nm": "麦兜·饭宝奇兵",
"preShow": false,
"sc": 10,
"globalReleased": true,
"wish": 27163,
"star": "大汪,孙小妞,张正中",
"rt": "2020-04-25",
"showst": 1,
"wishst": 1230,
"showInfo": "4月25日 周六"
},
{
"id": 1283276,
"haspromotionTag": false,
"img": "http://p1.meituan.net/w.h/movie/fcabb91dbae511e8a32af1deeb0c1cec204154.jpg",
"version": "",
"nm": "大红包",
"preShow": false,
"sc": 90,
"globalReleased": true,
"wish": 29488,
"star": "包贝尔,克拉拉,贾冰",
"rt": "2020-04-30",
"showst": 1,
"wishst": 120,
"showInfo": "4月30日 周四"
},
{
"id": 346302,
"haspromotionTag": false,
"img": "http://p1.meituan.net/w.h/movie/51d3b0c39d082db32c3534cb68338b441447222.png",
"version": "",
"nm": "灰烬重生",
"preShow": false,
"sc": 0,
"globalReleased": false,
"wish": 13023,
"star": "罗晋,辛鹏,黄觉",
"rt": "2020-04",
"showst": 1,
"wishst": 0,
"showInfo": "4月 待定"
},
{
"id": 247863,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/movie/a06c36755e3e4e902235e9904cc1551b4677926.jpg",
"version": "",
"nm": "印度奇游",
"preShow": false,
"sc": 0,
"globalReleased": false,
"wish": 9909,
"star": "瑞迪玛·潘迪特,王学兵,潘斌龙",
"rt": "2020-05-01",
"showst": 1,
"wishst": 0,
"showInfo": "5月1日 周五"
},
{
"id": 1280270,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/moviemachine/0c3f4cd8caf0f0848a54e3081349bdac22615677.jpg",
"version": "",
"nm": "魔法学院",
"preShow": false,
"sc": 0,
"globalReleased": false,
"wish": 9431,
"star": "Laura Megan Stahl,迈克尔·约翰斯顿,本·迪斯金",
"rt": "2020-05-01",
"showst": 1,
"wishst": 0,
"comingTitle": "5月1日 周五"
}
}
mock .js是配置文件 routse.json为路由文件
mock .js:
const dataset = require('./hotshowing.json');
const pwd = require('./cities.json');
module.exports =()=>{
return {
hotshowing: dataset.datalist,
cities:pwd.hotCities
}
}
routse.json:
{
"/api/ajax/hotshowing":"/hotshowing",
"/api/ajax/cities":"cities"
}
代理配置为:在vue.config.js
devServer :{
proxy: {
'/api': {
target: 'http://localhost:3005/',
changeOrigin:true,
pathRewrite:{
// '^/api': ''
}
}
}
}