vue-axios

选择什么网络模块

传统的Ajax是基于XMLHttpRequest（XHR）

• 配置和调用等方式非常麻烦
• 编码起来非常蛋疼
• 真是开发中很少用到，而是使用jQuery-Ajax

jQuery - Ajax

• 在vue的整个开发中都是不需要使用jQuery
• 为了方便进行一个网络请求，特意引用一个jQuery
• 完全没有必要为了网络请求就引用一个重量级的框架
  Vue-Resource
• Vue-Resource 的体积相对较小
• 停更
  Jsonp
• 使用Jsonp最主要的原因是为了解决跨域的问题

axios

• 有很多的有有点，官方推荐
• 在浏览器中发送XMLHttpRequest请求
• 在nodejs中发送http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据

请求方式

测试服务器url：https://httpbin.org

• axios(config)
• axios
  

基本使用

不指定方法，默认使用的是get方法

//不带参数
axios({
  url:'https://httpbin.org/get'
}).then(res=>{
  console.log(res)
})

//带参数
axios({
  url:'https://httpbin.org/base64/SFRUUEJJTiBpcyBhd2Vzb21l',
  params:{
    Name:'SFRUUEJJTiBpcyBhd2Vzb21l'
  }
}).then(res=>{
  console.log(res)
})

//当两个请求都成功返回后
axios.all([axios({
  url:'https://httpbin.org/get'
}),axios({
  url:'https://httpbin.org/base64/SFRUUEJJTiBpcyBhd2Vzb21l',
  params:{
    Name:'SFRUUEJJTiBpcyBhd2Vzb21l'
  }
})]).then(axios.spread((res1,res2)=>{
  console.log(res1);
  console.log(res2)

}))

• 使用axios.all，可以放入多个请求的数组
• axios.all([])返回的是一个数组，使用axios.spread可将数组[res1,res2]展开为res1,res2

全局配置

集成axios时，因为时第三方库，需要自己再封装一下，要是以后这个库停止更新，改起来会非常麻烦

封装axios

network/request.js

import axios from 'axios'

export default function request(config) {
	//create 返回AxiosInstance
    const instance = axios.create({
        baseURL: 'https://httpbin.org',
        timeout: 5000//ms
    })
    // instance 返回一个AxiosPromise
    return instance(config);
}

main.js

import Vue from 'vue'
import App from './App'
import store from './store/index'
import request from './network/request'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})
//调用
request({
  url: '/get'
}).then((ret) => {
  console.log(ret)
}).catch((err) => {
  console.log(err)
})

如何使用拦截器

axios提供了拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理
interceptors 有request和response拦截

import axios from 'axios'

export default function request(config) {
    //1 创建axios的实例
    const instance = axios.create({
        baseURL: 'https://httpbin.org',
        timeout: 5000//ms
    })
    //2 axios拦截器
    instance.interceptors.request.use(aaa=>{
        //1 比如config中的一些信息不符合要求
        //2 比如每次发送网络请求时，都希望在界面中显示一个请求的图标
        //3 某些网络请求（比如登录token），必须携带一些特殊的信息

        console.log(aaa);
        return aaa
    },err=>{
        console.log(err)
    })
    //响应拦截
    instance.interceptors.response.use(res => {
        console.log(res);
        return res;
    }, err => {
        console.log(err)
    })



    //3 发送真正的网络请求
    return instance(config);
}