Vue脚手架的AJAX配置

sass基于node环境，故需要安装node-sass和sass-loader
获取dom元素：

<div ref="myDiv"></div>

this.$refs.myDiv

vue脚手架

使用及文件

vue create 项目名：创建项目
src目录

• main.js是入口文件
• app.vue是总组件文件

配置ajax

步骤

1. 安装axios包 npm i axios -S
2. 在src目录下创建requests文件夹，专门用来放ajax的配置文件
3. 新建index.js，在里面创建ajax实例，定义并导出处理方法

   import axios from 'axios';
   
   const ajax = axios.create({
    baseURL: 'http://jsonplaceholder.typicode.com/'
   });
   
   //导出方法
   export const getTodos = () => {
    //这里的ajax.get是一个promise，get里面指的是请求的目标网址的路由
    return ajax.get('/todos');
   }
   

   注1：在main.js的文件里导入requests的方法并挂载到Vue的prototype上，这样就可以在任何一个vue实例里使用this.$http.requests中的方法发送请求
   
   注2：以上ajax方法即请求返回的数据处理在App.vue的create阶段执行

ajax拦截器interceptors

• 请求拦截器

ajax.interceptors.request.use((config) => {
  config.headers.token="asdf";
  return config;
})

作用：1.发送请求中设置CSS显示全局的loading状态
2.在请求参数头部加上全局的参数，比如token

• 响应拦截器

ajax.interceptors.response.user(resp => {
  if (resp.status === 200){
  	//如果正确就返回出去的数据即可
    return resp.data;
  }
  //这里统一处理状态错误，必须要后端配合，接口返回的格式必须完全一致
})

作用：1.接收响应后隐藏全局的loading状态
2.全局处理错误
注必须return，否则拦截不会执行

开发环境和真实环境
在开发时后端的数据没有完成，ajax需要请求mock数据，但真实项目上线后就要换成真数据，所以在ajax配置中要判断是开发环境还是生产环境来选择不同的api接口

const isDev = process.env.NODE_ENV === 'development';
const ajax = axios.create({
  baseURL: isDev ? 'http://jsonplaceholder.typicode.com/' : '真实项目的api地址'
});

npm run build

将所有目录文件压缩打包到dist文件里，但打包后的文件只能在服务器上运行