选用mock数据的演示代码，消除vue中使用Axios调用接口时出现的ie数据管理难题

1.先用node+express+mysql简单布署一下后台

1.问题

本文介绍了vue 运用mock数据的演示代码，分享给大家，具体如下：

近些日子告诉项目需求，用到了vue。

const express = require('express');
const mysql = require('mysql');
const static = require('express-static');

const db = mysql.createPool({
  host: 'localhost',
  user: 'nodejs',
  password: 'nodejs',
  database:'resume',
  port: 3306
});

var app = express();
// ====》设置了一个 /resume 的接口，并将从数据库获取的数据data，send到前台（接口名字随便取的）
app.use('/resume', (req, res)=>{
  db.query(`SELECT * FROM about_table`, (err, data)=>{
    "use strict";
    if(err){
      res.status(500).send('databases error').end();
    }else{
      res.send(data).end();
    }
  })

})

app.listen(8080);
app.use(static('./static/'));

最近几年在利用vue2 + axios
调用接口时遭遇三个IE中很奇葩的难题，让小编看不惯了比较久。

早先化你的项目

刚开始搭框架的时候用的是vue-resource后边看到官方推荐axios就换过来了
顺便封装了弹指间

2. 前台央浼接口，调用数据来渲染页面（vue + vue-resource）

废话不多扯，正是在其余浏览器中调用接口重回数据然后可以很顺畅的进行拍卖，但在IE（9-11）中开掘发送哀告是打响的还要也能抓到服务端再次来到来的数量。却发今后拍卖重返来的数目标时候管理的多少难点，怎么搞即是十二分。

话不用啰嗦，首先开头化你的档期的顺序，最简易的正是选择vue-cli啦

//引入axios
import axios from 'axios'

let cancel ,promiseArr = {}
const CancelToken = axios.CancelToken;
//请求拦截器
axios.interceptors.request.use(config => {
 //发起请求时，取消掉当前正在进行的相同请求
 if (promiseArr[config.url]) {
  promiseArr[config.url]('操作取消')
  promiseArr[config.url] = cancel
 } else {
  promiseArr[config.url] = cancel
 }
  return config
}, error => {
 return Promise.reject(error)
})

//响应拦截器
axios.interceptors.response.use(response => {
 return response
}, error => {
 return Promise.resolve(error.response)
})

axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

export default {
 //get请求
 get (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'get',
   url,
   params: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
 },
 //post请求
 post (url,param) {
  return new Promise((resolve,reject) => {
  axios({
   method: 'post',
   url,
   data: param,
   cancelToken: new CancelToken(c => {
   cancel = c
   })
  }).then(res => {
   resolve(res)
  })
  })
  }
 }

===》
js                                                                                                                 

2.管理进程及方法

vue init webpack

说明

  // 引入 vue
<script src="//cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>
// 引入 vue-resource                                                    <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script>
  window.onload = function () {
   new Vue({
     el: '#demo',
     data:{
      aboutData:[] //建一个空数组，用来保存调用接口获取的数据
     },
     created: function () {
      this.getRoute()
     },
     methods: {
      getRoute: function () {
        var that = this; 
        that.$http({
         method: 'GET',
         url: '/resume' //这里填写刚刚后台设置的接口
        }).then(function(response){
         this.aboutData = response.data; // promise的then成功之后，将response返回的数据data，保存到aboutData数组里
        },function (error) {
         console.log(error);
        })
      }
     }

   })
  }
</script>

小编利用了console大法去化解那一个难点，具体是这么的：作者先将服务器再次来到过来的数目打字与印刷到浏览器调控台，结果开采都能打字与印刷出来，那一年就郁闷了，明明有数据为何在IE上只怕极其吗，于是自身用typeOf
来查阅重返数据的门类发掘axios在IE时管理的回到数据竟然是string类型。那下化解措施就出来了。

引入mock.js

1、为严防发起呼吁时，当前正在张开的平等央求，在央浼拦截器中参与了hash判别，将同一诉求url拦截

威尼斯人线上娱乐 ，===》 html

var newData;

if (typeOf data === 'string') {

newData = JSON.parse(data)

} else {

 newData = data

}

安装 mockjs

2、将axios中get，post公共配置抽离出来

<div id="demo">
　　<div class="item" v-for="value in aboutData"> // v-for 遍历数组后，即可将数据以｛｛value.xxx｝｝的方式渲染出来
  　　<h2>{{value.title}} {{value.name}}</h2>
  　　<p>{{value.content}}</p>
　　</div>
</div>

下一场对newData实行拍卖就能够化解了。

npm install --save-dev mockjs

axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
 'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 10000

如上正是本文的全体内容，希望对大家的学习抱有帮忙，也可望大家多多帮助脚本之家。

如上那篇解决vue中使用Axios调用接口时现身的ie数据管理难点便是作者分享给我们的全部内容了，希望能给我们贰个参照，也期待我们多多扶助脚本之家。

选用mock数据的演示代码，消除vue中使用Axios调用接口时出现的ie数据管理难题。引进到Vue原型上，方便使用

3、get，post乞请的封装
只怕您会问，这里的axios重回的正是promise对象，为何还要再一次对get,post封装叁回promise.因为笔者那边的话，在开垦中利用async
await会产出数量央求失败的事态，报的错正是回到的不是promise对象。(ps：可async
await再次来到的正是promise呀,那一个难点持续再搞一下)就直接return了一个promise对象，以制止下边包车型客车失实。上边是呼吁接口的多少个例证

你可能感兴趣的小说:

• vue怎么着从接口乞求数据

你大概感兴趣的篇章:

• vue-cli
  axios供给格局及跨域管理难题
• vue使用axios跨域乞请数据难题详解
• vue2.0
  axios前后端数据管理实例代码
• 消除vue第22中学使用axios
  http诉求出现的标题

 import mockjs from 'mockjs'
 Vue.prototype.$mock = Vue.$mock = mockjs.mock

import req from '../api/requestType'
/**
 * 拼团详情
 */
export const groupDetail = param => {
 return req.get('/RestHome/GroupDetail',param)
}

如上引进到Vue原型上，能够选择 this.$mock直接发生mock数据

上面是数量的收获

请看这里Vue.prototype

async getData() {
 const params = {
  TopCataID: 0,
  pageNumber: this.pageNumber,
  pageSize: this.pageSize
 }
 const res = await groupList(params)
},

请看这里mockjs

到此处大家就概括的包装了一晃相符本人项目标axios

在项目支出中，前后台分离，做了假数据，项目采纳vue2.0重构，后台也推到重来了，为了不推延开垦进程，作者做了设想的多少央求，使用vue-cli脚手架搭建的花色文件中dev-server搭建虚构api伏乞，访问自身mock的假数据虚构哀告后台的形式，具体做法如下

装进理由：

在build/dev-server.js文件中

1、能够和后端商讨好错误码在那统一提醒统一管理，省去不须求的分神

在var app = express()那么些实例的上边增加如下代码

2、如果做接口全报文加解密都得以在此管理

// 本地json-server服务器搭建代码
// 引入数据库文件
var appData = require('../mock.json')
// 引入数据库
var getBoardList = appData.getBoardList
var apiRoutes = express.Router()
// 使用api的方法来创建连接时候的请求
apiRoutes.post('/getBoardList', function (req, res) {
 res.json({
 errno: 0 ,
 data: getBoardList
 });
})
// 调用api
app.use('/api', apiRoutes)

接口统一归类： 

里头 appData
重视的mock.json文件是团结mock的假数据的文本，依照前后台须求和谐mock或然应用mock.js制作假数据

const serviceModule = { 
 getLocation: { 
 url: ' service/location/transfor', 
 method: 'get' 
 } 
} 
const ApiSetting = {...serviceModule } 

export default ApiSetting 

getBoardList是贰个接口，var getBoardList = appData.getBoardList
就是在appData定义了那三个接口数据。

分拣好处:

var apiRoutes = express.Router()
是创办了三个api的路由，apiRoutes.post是创办三个post接口，那几个post接口有贰个req和多少个res参数，分别实行乞求和重返，当再次回到的时候会给大家一个json，那么些json包蕴三个气象码errno和重回的数量data（data指向了接口数据getBoardList）。

1、早先时期接口晋级大概接口名转移便于维护

下一场当大家调用api的时候app.use(‘/api’,
apiRoutes)，就会寻常使用这些服务了

http调用：

此间自个儿动用了vue2.0推荐介绍的axios须求数据，代码如下

<script> 
import http from "../../lib/http.js"; 
import ApiSetting from "../../lib/ApiSetting.js"; 
export default { 
 created: function() { 
 http(ApiSetting.getLocation,{"srChannel": "h5",}) 
 .then((res)=>{ 
  console.log(res) 
 },(error)=>{ 
  console.log(error)  
 }) 
 }, 
 methods: { 

 } 
} 
</script> 

this.$http.post('/api/getBoardList')
 .then(function (response) {
  console.log(response.data.data);
  alert('成功了');
 })
 .catch(function (code) {
  alert('失败了');
  console.log(code);
 });

上述就是本文的全体内容，希望对大家的就学抱有辅助，也冀望大家多多帮忙脚本之家。

开采浏览器的调控台的network，你会意识早已发出了网络伏乞

您恐怕感兴趣的稿子:

• 详解Vue 2.0封装axios笔记
• vue 里面使用axios
  和包装的示范代码
• 浅谈在Vue-cli里基于axios封装复用诉求
• Vue二回封装axios为插件使用详解
• vue 2.x 中axios 封装的get
  和post方法
• vue2.0学习之axios的卷入与vuex介绍
• 详解vue中axios的封装
• vue中axios的包装难点(简易版拦截,get,post)
• 详解vue axios一遍封装
• vue中Axios的卷入与API接口的治本详解

与此同时，数据也欢欣的回到回来了：

假虚构增加接口数据，继续在dev-server.js中加多就可以了，post，get等等都得以。

小心，每一遍更换dev-server.js后供给重新npm run dev运转项目

如上便是本文的全部内容，希望对大家的读书抱有扶助，也希望大家多多协助脚本之家。

你也许感兴趣的篇章:

• node+koa达成数量mock接口的法子
• 客户端（vue框架）与服务器（koa框架）通讯及服务器跨域配置详解
• 详解基于Vue+Koa的pm2配置
• vue+mockjs模拟数据达成内外端分离开荒的实例代码
• vue+vuecli+webpack中应用mockjs模拟后端数据的以身作则
• vue-cli项目中怎么利用mock数据
• 详解在vue-cli项目中动用mockjs(需要数据删除数据)
• 详解vue-cli项目中用json-sever搭建mock服务器
• 接纳vue + koa2 +
  mockjs模拟数据的方法教程

---