axios入门+封装

axios传送门：http://www.axios-js.com/

axios的理解

axios是通过promise实现对ajax技术的一种封装，就像jquery实现ajax封装一样。
vue2之后vue-resource就不在更新了，推荐使用axios，
axios可以拦截请求和响应，在then() catch处理前拦截他们，可以用在请求动画等
简单来说：ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装

优缺点

ajax

ajax，本身是针对mvc的编程，不符合现在前端的mvvm的浪潮
ajax，基于原生xhr开发，XHR本身的架构不清晰，已经有了fetch的替代方案
query整个项目太大，单纯使用ajax却要引入整个jquery非常不合理

axios

从node.js创建http请求
支持promise api
客户端支持防止（csrf）网站恶意利用
提供了一些并发请求接口（重要，方便了很多的操作）

axios.all([
    axios.get('data.json'),
    axios.get('city.json')
]).then(
  axios.spread((dataRes,cityRes)=>{
    console.log(dataRes,cityRes)
})
).catch(err=>{})

all同时进行两个请求，同时输出两个结果，
spread在继续对返回值处理，输出
当需要同时请求多个接口时，并同时处理返回值时可以使用并发请求

axios.post('/login',{username:'zmq',pwd:'123'}).then(res=>{})
axios.get('/login',params:{username:'zmq',pwd:'123'}).then(res=>{})

通用使用

//axios(config)
axios({
  methods:'post',
  url:'http://jsonplaceholder.typicode.com/users',
  data:{
      name:'zmq'
  }
}).then(res=>{

}).catch(err=>{})

并发请求

function  getUserAccount(){
  return axios.get('/user/12345')
}
function getUserPromise(){
  return axios.get('/user1/1235')
}
axios.all([getUserAccount(),getUserPromise()]).then(
  axios.spread((data1,data2)=>{
    console.log(data1,data2)
  })
)

axios的封装

首先了解：
vue分为开发环境，生产环境，vue-cli自动切换环境
vue中config 中的
dev.env.js为开发环境变量
prod.env.js为生产环境变量
通过process.env.NODE.ENV获取各环境中的变量
因为请求的接口开发和生产环境不同，生产环境直接‘’除域名没其他添加的时候
通过以下代码修改axios中baseURL
axios中baseURL的作用：自动添加在url前面，除非url是绝对url，
它可以通过设置一个baseURL便于axios实例方法传递相对的url

axios.defaults.baseURL=process.env.API

封装主要是封装一个统一的拦截器，拦截请求前数据做统一处理，响应后数据做统一处理。
拦截请求可以做一些请求动画
响应拦截可以判断用作判断响应状态码，例如，本地存储了用户的信息，在一段时间内，是登录状态，当超时的时候，本地信息过期，这时候在去拿本地信息请求数据，后台就会返回信息过期的状态码，这个时候可以拦截下状态码，同时将本地登录信息清除，让用户重新登录
第二个封装就是，封装统一的请求接口的文件，将所有接口放在一个文件或者多种类型文件中。使用的时候直接在vue中使用封装好的方法
http.js

import  axios from 'axios'
let $http=axios.create()
$http.defaults.baseURL=process.env.API //在congif  dev.env.js  prod.env.js 中设置的
//请求拦截
$http.interceptors.request.use(
  config=>{
      return config
  },
  err=>{
      return Promise.reject(err)
  }
)
//响应拦截
$http.interceptors.response.use(
    response=>{
        if(response.data.errcode==40023){
          localStorage.clear()
        this.$router.path('/login')
        }else{
            //当前还是登陆状态
       }
   }
  )

//统一接口请求封装
function  fetch(method='get',url,params){
   return new Promise((resolve,reject)=>{
       $http(
       {
          url:url,
          method:method,
          data:params
        }
         ).then(res=>{
            reslove(res)
         }).catch(err=>{
            reject(err)
        })
   })
}
export  default  fetch

api.js

import fetch from './http.js';
export default{
    login(params){
      return fetch('post','/login',params)
    }
}

login.vue 使用

import comService from '../common/api/comService'
let params={
  username:'zmq',
  pws:'123'
}
comService.login(params).then(data=>{
    console.log(data)
})