Vue学习笔记《一》跨域代理及axios的使用。

从去年八月份开始，断断续续的接触vue ，中间由于跨域代理问题闹过一些尴尬的问题。写总结，促使我加深对知识点的记忆。有不对的地方请多指教。

代理跨域， 浏览器之间是有同源策略的，处于安全考虑不同域之间，不允许获取数据，img script audio等标签除外，但这些通常都是get的形式。而如果用js的ajax去远程获取的话就会触发同源策略，需要后台设置同意跨域才可以，比较麻烦。

所以Vue里用到了代理跨域，所谓代理跨域，就是代替前端用后端发出http请求。在vue的脚手架中，运行项目是npm run dev或者，npm run start ,其实是打开了它已经配置好的node服务器，vue的代理就是通过node来代替前端发起http请求。

在项目文件里找到config文件夹里的index.js  文件，修改dev下的proxyTable属性，在target里添加代理的目标地址。

设置好代理之后，在页面里引入axios，可直接使用get请求

import axios from 'axios'

axios.get('/api/apiserver/basic',{
        params:{
          pageIndex: 1,
          pageSize: 20,
          onlySustained: false,
          warnTimeStart: "2019-01-01",
          warnTimeEnd: "2019-05-06",

        }
      })
        .then(res=>{
          console.log(res)
          console.log(res.data)
           this.AllInfo=res.data
        })
        .catch(err=>{
          console.log(err)
        })

POST请求：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(response=> {
    console.log(response);
  })
  .catch(error=>{
    console.log(error);
  });

执行多个并发请求：

在执行多请求并发的时候，其中有一个请求失败，直接都不再请求了，而且会返回数据报错信息.

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

请求的一些配置(常用的)：只有url是必须的，如果没有指定method，请求将默认使用get方法。

url："/getuser" 用于请求的服务器URL；

method:“get/post” 默认是get ,创建请求时使用的方法。

transform Request 允许在服务器发送前，修改请求数据
只能用在put post patch   这几个请求方法。后面数组中的函数必须返回一个字符串，或者ArrayBuffer或者Stream

transformRequest:[function(data){
对data 进行任意的转换处理；      
return data}]；

  
transformResponse: 在传递给then,catch前 允许修改响应数据
  
headers是即将被发送的自定义请求头

params 是即将与请求一起发送的url参数。

paramsSerializer 是个负责params 序列化的函数。
  
data 是作为请求主体被发送的数据

只适用于这些请求方法put post patch 

在没有设置transformRequest时，必须是以下类型之一。

string,plain object ,ArrayBuffer,ArrayBufferView,urlSearchParams

浏览器专属： formData.file,Blob

node专属：Stream
  
timeout 指定请求超时的毫秒数（0表示无超时间） 如果请求花费了超过timeout的时间，请求将被中断。
  
withCredentials:false 表示跨域请求是否需要使用凭证。adapter:function(config){}:允许自定义处理请求，
  
  请求拦截，
 

 axios.interceptors.request.use(config=>{
  //在发送请求之前做的事；
  return config;},err=>{
  //请求错误的处理
  return.params.reject(err);});

  
  响应拦截，返回数据处理
 

 axios.interceptors.response.use(response=>{
  //对返回数据处理 如发送请求时添加加载动画，当数据返回时 关闭加载动画。
  
  return response};err=>{
  //对返回数据错误时 处理。也许要关闭加载动画，并提示加载失败。
  return Promise.reject(err);});