axios拦截器和json-server数据模拟

最新推荐文章于 2024-01-23 13:09:01 发布
最新推荐文章于 2024-01-23 13:09:01 发布
阅读量646 收藏 1
点赞数
文章标签： proxy vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42863800/article/details/105904135
版权

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-wWatch file(s)是否监听
–routes-r指定自定义路由
–middlewares-m指定中间件 files[数组]
–static-sSet static files directory静态目录,类比：express的静态目录
–readonly–roAllow only GET requests[布尔]
–nocors–ncDisable Cross-Origin Resource Sharing[布尔]
–nogzip , --ngDisable GZIP Content-Encoding[布尔]
–snapshots-SSet snapshots directory[默认值: “.”]
–delay-dAdd delay to responses (ms)
–id-iSet database id property (e.g. _id)[默认值: “id”]
–foreignKeySuffix– fksSet 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': ''
        }
      }
    
    }
  }
自律自强的鱼
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2/3 - 使用mock模拟数据，axios发送请求时报错Request failed with status code 404报错，请求数据报错404，vue mock.js 报错详细解决！
高级前端工程师
07-10 1942
vue，nuxt，mock，插件，模拟请求接口数据，报错，用mockjs模拟数据，axios发送get请求时出错，路径没问题为什么会404，接口地址没有错，请求数据报错404，http请求出现了问题，axios，详细解决教程，404，mock.js请求数据报错404，vue报错解决，浏览器，请求，URL请求地址，正确，错误，Request failed with status code 404，vue报错解决:mock.js请求数据报错404_vue中使用mockjs没有数据，vue-cli中mock本地j
模拟axios
LouYQ0213的博客
09-21 616
axios 一些实现原理
【axios】使用json-server 搭建REST API - 使用axios - 自定义axios - 取消请求 - 拦截器
热门推荐
YK菌的博客
03-04 1万+
文章目录1. 自己创建一个API1.1 API 的分类1.2 使用json-server 搭建REST API2.9.1 json-server 是什么?2.9.2 使用json-server2.9.3 使用浏览器访问测试2.9.4 使用axios 访问测试4. XHR 的 ajax 封装 (简单版axios)4.1 特点4.2 编码实现4.3 使用测试6 axios 的理解和使用6.1 axios 是什么?6.2 axios 特点6.3 axios 常用语法6.4 难点语法的理解和使用6.4.1 axio
axios的拦截器（Interceptors）
m0_63760882的博客
09-06 265
axios的拦截器（Interceptors）
Axios、axios拦截器、fetch-jsonp ——0807
张静的博客
10-22 255
一、axios——vue数据请求插件 用来请求 cross 跨域的 api 接口的插件。 1、axios的使用 1、安装axios： cnpm install --save-dev axios 2、引入并使用 全局引入并关联、使用 main.js里边： import Axios from 'axios' Vue.prototype.$axios=Axios; 组件里边使用： //组件挂载完成之后进行数据请求 mounted(){ this.$axios .get("") //
前端使用json-server实现模拟数据
水痕
06-02 754
一、基本使用 1、在项目中安装包 npm install json-server -D 2、在项目的根目录下创建一个文件夹及一个json文件__json_server_mock__/db.json { "user": [] } 3、在package.json中配置启动脚本 "scripts": { "mock": "json-server ./__json_server_mock__/db.json --watch --port 6000" }, 4、使用api接口测试工
axios请求,拦截器的使用
weixin_34054866的博客
12-28 207
　　1. axios 创建请求　　　　import axios from 'axios'　　　　import {Message} from 'element-ui'　　　　import router from "../router/index";　　　　/** axios创建实例*/　　　　let http=axios.create({ baseURL:'/ser/',　　　　timeout:15...
Json server的配置和使用 + axios的配置和使用
weixin_43935061的博客
05-26 273
json-server的配置使用+axios的配置与使用
vue+jsonserver
woochon的博客
11-13 577
使用jsonserver+axios模拟数据 安装(前提是安装有node环境) npm install --save json-server 提供json数据文件 在项目根目录下，新建一个 JSON 文件db.json 配置json-server 在build\webpack.dev.conf.js下配置，如果是用旧版本的手脚架工具初始化的项目，是在build/dev-server.js下配置。 ...
axios如何在nodejs项目里封装_学习 axios 的基本使用和项目级封装
weixin_31482671的博客
12-24 768
一、Ajax在很久以前项目中进行数据处理通常是发送 Ajax(Asynchronous JavaScript and XML)，以前使用原生的 XMLHTTPRequest。其中传统的 Web 应用允许用户端填写表单(form)，当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单，然后送回一个新的网页，但这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML码往往是相同的。最...
使用axios拦截器模拟mock服务
01-03
使用axios拦截器模拟mock服务 为什么自己弄个mock？还不是前后端联调过程，后端动不动就重启服务，接口没数据，界面没效果，真的烦。怎么不搞开发环境？我也想啊，就是不搭，诶，无奈！！ axios拦截器是什么呢？是在请求前跟响应后的一个处理方法，分为request拦截器和response拦截器。模拟mock主要用到response拦截器，接口正常就使用接口返回的，接口报错就使用本地预置的数据。 //创建自己的axios实例 const myPost = axios.create({ baseURL:process.env.VUE_APP_baseURL,//环境变量 timeou
vue+json-server+axios 模拟后台数据请求
qq_42334965的博客
04-07 963
vue+json-server+axios 模拟后台数据请求 参考资料：https://github.com/typicode/json-server 安装 json-server npm install -g json-server 在 vue 根目录下创建 db.json 文件 严格按照 json 格式写入数据（不然会报错！！！），如 { "logins": [ { ...
axios body传Json格式的参数
weixin_42620843的博客
09-26 2442
isJson(url, param) { return new Promise((resolve, reject) => { axios({ headers: { 'Content-Type': 'application/json;' }, method: 'post', url: url, data: JSON.stringify(param) }).then(res => { resolve(res) }).catch(err => { reject(err)
axios 传递json axios发送json数据
最新发布
hdhdhdhdhdhdhdh的博客
01-23 1995
当数组length不确定时，处理起来就比较麻烦了，所以这种情况传参使用JSON字符串的形式比较合适。前端向后台发送的请求数据有：JSON字符串和form表单两种格式。一般情况下可以两种格式都OK，但在某些情况下就需要根据情况来进行选择。这个时候的区别就体现出来了，Form表单会将数组按照索引进行拆分，所以这个时候后台不能直接通过dataArr来获取这个数组数据，1.当参数的数据结构比较复杂时，如不仅仅是简单的键值对，而是对象或数组嵌套结构时，建议使用JSON字符串传参。3.其他一般情况两者皆可。
axios异步请求传递json参数中参数是对象的情况
yiyueqinghui的博客
07-08 4925
axios.post({ name:'cj', date:{ start:'2018-09-09', end:'2019-09-09' } }) 如上传递，axios传递过程中，会将其date对象转化为字符串，后台接收到的是字符串，而非对象； 可如下传递对象 axios.post({ name:'cj', d...
json-server的使用以及axios的发起的ajax请求
业余前端的职业经历
10-30 860
作为一个前端工程师,在后端没有数据接口的时候，本身又不喜欢用静态数据 那么 json-server就是必备的一个技能 json-server是第三方 插件包 要想使用首先得安装 1.可以使用npm 也可以使用yarn安装 : npm install -g json-server //建议全局安装 下次使用就不用再次安装 2.安装完之后书写一个data.json文...
json-server‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件
kingheart_的博客
11-09 2492
首先要知道自己的环境变量是否配好了，像自己就是因为环境变量没配好，所以查看不了json-server -v 的版本 而且也启动不了。
json-server(模拟后端接口请求)
weixin_43294560的博客
03-15 1307
1、下载 npm install -g json-server 2、使用 (1)创建.json文件添加属性 localhost:3000/键名 localhost:3000/键名/id值返回对应的字段 { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comme
axios 返回 转换 json_Vue学习笔记-08 使用Axios与服务器进行数据交互
weixin_39636645的博客
01-31 6539
前面的学习基本上已经满足了我们开发一个 vue 单机项目了，但是在实际的开发中，我们还需要与后端交互，从后端获取我们需要展示的数据。于是我们需要学习 Axios 。Axios 是什么Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。http 库就是用来发起 http 请求与服务器交互的函数库。它有以下功能特性：从浏览器中创建 XMLHttpReques...
使用axios请求json-server的数据，url会自动拼接id
05-29
是的，axios和其他HTTP客户端库也可以用来请求JSON数据。和使用curl一样，当你向JSON-Server发送GET请求时，URL会自动拼接id字段以获取对应的数据。 以下是一个使用axios获取JSON-Server数据的简单示例： ```javascript import axios from 'axios'; // 发送GET请求，获取所有帖子数据 axios.get('http://localhost:3000/posts').then(response => { console.log(response.data); }); // 发送GET请求，获取id为1的帖子数据 axios.get('http://localhost:3000/posts/1').then(response => { console.log(response.data); }); // 发送POST请求，创建新的帖子数据 axios.post('http://localhost:3000/posts', { title: 'New Post', author: 'John Doe' }).then(response => { console.log(response.data); }); ``` 在上面的示例中，我们首先使用axios发送GET请求获取所有帖子数据，然后使用GET请求获取id为1的帖子数据，最后使用POST请求创建一个新的帖子。 当我们使用GET请求获取数据时，axios会自动将id字段拼接到URL中。例如，当我们使用`axios.get('http://localhost:3000/posts/1')`请求获取id为1的帖子数据时，axios会将URL设置为`http://localhost:3000/posts/1`，这将返回id为1的帖子数据。 希望这个示例能够帮助你更好地了解如何使用axios请求JSON-Server数据，并自动拼接id字段获取对应的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值