vue笔记（七）网络封装

前后端分离的开发方式，造成了前端必须提前自己造假数据，并且来使用代理请求

配置vue-cli的服务器代理

开发阶段，需要在localhost：8080的devserver，到某个服务器来获取数据，比如，我自己用express写的localhost：3000;鉴于浏览器的同源策略阻拦，必须配置代理

在根目录，即和package.json同级目录，配置vue.config.js;（注意，不是webpack.config.js）

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        "target": "http://localhost:3000/",
        pathRewrite: {
          '^/api': ''  //将api去除，比如在axios.get('/api/abc'),本来会访问local host/8080/api/abc;经过代理，访问的最终结果是：localhost：3000/abc
        }
      },'/search':{
        target: 'https://www.npmjs.com'，
        'changeOrigin': true //代表请求头也转换过来，

      }

    }
  }
}

 请求地址怎么写？

　　假设当前项目的url是localhost：8080。axios.get('https://localhost:8080/abc')和axios.get('/abc')的效果是一样的，因为不写协议域名端口的话，会自动的添加当前的域，即当前的项目的协议域名端口。这样的好处是，当我们的项目在其他url上跑时，就不需要重新更改了。

mokejs的作用：

　　当后端服务器缺少某端口时候，通过mokejs，可以拦截axios请求，不去发送到服务器，而是直接返回数据。

　　axios定义拦截规则，模拟json数据，返回给浏览器数据

mockjs的两个注意：

　　1.Mock.mock(url, "get",data):get必须小写，大写拦截不了

　　2.Mock.setup({timeout:'300-1000'}); timeout的值必须用引号。

 在src下的mock目录：

　　

　　reset_mock.js是设置mock的，index.js是引入所有mock文件的，在main.js入口文件，只需要引入./mock/index.js即可。

封装axios

　　针对文档中定义的返回数据格式：code是0，msg是空串时，返回的是正常数据，可以将数据应用到页面，否则返回的是错误，，则需要弹出报错信息；

      

可以利用axios拦截器来处理,对

可以为自定义 axios 实例添加拦截器

import axios from 'axios';
import showMessage from '@/utils/showMessage.js';//引入弹窗
const instance = axios.create();
instance.interceptors.response.use(function (resonse) {
  if (resonse.data.code == 0) {//按照接口文档，code为0，返回正确的数据
    return resonse.data.data;
  } else {//拦截并弹出
    showMessage(resonse.data.msg, 'warn', 'danger')
  }
}, function (err) {//这个error是请求错误而不是resopsebody里的错误
  console.log(err);
  showMessage('网络错误', 'warn', 'danger')
})

export default instance;

在Vue.prototype上就可挂载这个instance了；